html - div相互重叠

Question

这是 jsFiddle：小提琴

有两个div。一个在页面内容之间，另一个div在内容的末尾（滚动后出现）。现在的问题是我希望第一个div与第二个重叠div，但要做到这一点，我不知道该怎么做。这将是一个动态页面，因此页面height会不断变化，因此我不能position使用absoluteandtop或bottom关键字。怎么做 ？？注：要求为橙色与红色重叠。

Answer 1

答案在于使用 jquery 来确定第一个（橙色）div 的位置，而不是使用这些值来控制第二个（红色）div 的位置。 http://jsfiddle.net/4Zaqg/5/ 花了我一段时间才弄清楚这个..问题是额外的一组 { } 括号。

显然我没有碰 z-index，而是选择稍微改变 div 的大小来验证发生了什么......哦，请告诉我这不是家庭作业。

将此脚本添加到您的 html 文件中

$(document).ready(function () {
     var o = $("#orange").offset();
     $("#red").offset({left:o.left, top:o.top});
});

Answer 2

我找到了方法。我们可以使用这样的 CSS 代码来执行此操作：

#orange{
    width:100%;
    height:50px;
    background-color:orange;
    position:relative;
    top:50px;
    z-index:2;


}
#red{
     width:100%;
    height:50px;
    background-color:red;
    z-index:1;
}

小提琴：点击这里