html - CSS:将动态大小的 div 堆叠在一起(使用 z-index)

Question

我有一系列内部有动态内容的 div(内容的长度由 CMS 决定):

<div class="contentbox">
~content~
</div>
<div class="contentbox">
~content~
</div>
<div class="contentbox">
~content~
</div>

我希望每个 div 的顶部位于顶部的 div 的正下方，从而创建“3D 叠纸”效果。

通常我会使用 z-indexes 和绝对位置，并将 margin-top 设置为父 div 的高度，例如:

#contentbox1 {
height: 300px;
z-index:99;
position: absolute;
}
#contentbox2 {
margin-top: 290px;
height: 300px;
z-index:98;
position: absolute;
}

但如果我有动态内容并且不知道上面的 div 的高度是多少，这将不起作用。

有谁知道解决这个问题的方法，这样我就可以“3D 堆叠”div，但将它们放在页面的更下方？

编辑:这是我的问题的一个 fiddle :http://jsfiddle.net/XHJS8/2/ (请注意，您看不到其他 2 个 div，因为它们被较大的第一个 div 隐藏了)

Answer 1

好吧，我真正能做到的唯一方法是使用 JQuery:http://jsfiddle.net/XHJS8/8/

在这里，我获取了前一个 div 的 height 并相应地调整了当前的 divs margin-top:

var num = $('.contentbox').length;

var i = 0;

var z = 99;

var totalmarg = 0;

while(i <= num){

    if (i > 1){
        y = i - 1;

       var margheight = $(".contentbox:nth-child(" + y + ")").height();

        margheight = margheight + 20;

        totalmarg = totalmarg + margheight;

        $(".contentbox:nth-child(" + i + ")").css("margin-top", totalmarg );
    }

$(".contentbox:nth-child(" + i + ")").css("z-index", z );    

z = z - 1;

i++;

};