如何让div从其他div中崛起？

Question

我知道如何在div之上堆叠div，方法是对父div执行position:absolute，对子div执行position:relative，但是如何才能让div从另一个div“升起”呢？我想要实现的一个例子是here。滚动到底部并将鼠标悬停在图稿上。

Answer 1

HTMl

<div id="pic">
    <div>

    </div>
</div>

CSS

#pic {
    position: relative;
    background: yellow;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

#pic div {
    position: absolute;
    bottom: -50px;
    background: black;
    height: 50px;
    width: 100px;

}

JQuery

$('#pic').hover(
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '+=50'
        }, 100);
    },
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '-=50'
        }, 100);
    }
);

jsfiddle：http://jsfiddle.net/Z6eLa/2/

Answer 2

您可以做的是将弹出框绝对定位在相对定位框中，例如：

<div class="featured-image">
  <div class="caption">
    <p>This is where your text goes</p>
  </div>
</div>

现在你已经有了这些，你会想要使标题不可见，除非滚动。因此，使用CSS实现此目的的一个简单方法是：

.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }

当您将鼠标移到图像上时，最后一行代码会显示出来。

然后，您可以轻松地使用jQuery对其进行动画处理。这似乎就是他们正在使用的。

$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
    $(".caption", this).stop(true, true).show(500)
};
var hide = function() {
    $(".caption", this).stop(true, true).hide(500);
};  
    $(".featured-image").hover(show, hide); 

Answer 3

介绍一下jQuery和z-index。

http://api.jquery.com/slideDown/

这里的诀窍是向下滑动会让你的顶部div向下滑动。我想到的唯一一件事是，不是从下往上扩展，而是相反。获取顶部的div，并将其向上滑动，而另一个div则显示在其后面。它应该给出底部div‘向上滑动’的外观。

注意，如果这不起作用，很抱歉。实际上，我不确定你是否能让它滑到一半，而不是所有的way...good运气！