CSS：堆叠在彼此（使用的z-index）的顶部

Question

我有一系列具有动态内容的内部（内容长度由CMS确定）的div的动态调整的div：

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

我想顶端的每个div都坐在顶部的一个之下，创建一个'3D堆纸'效果。

通常我会用Z-索引和位置绝对和刚刚成立的上边距父div的高度，例如：

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

但是这不会工作，如果我有动态内容和不知道上面div的高度是多少。

有没有人知道一种方式去这个，所以我可以“3D堆栈”的div，但将其放置在页面的下方？

编辑：这是我的问题的小提琴：http://jsfiddle.net/XHJS8/2/（注意，您怎么看不到其他2个的div，因为它们是由较大的第一个隐藏）

Answer 1

OK，我唯一的办法确实是与JQuery：http://jsfiddle.net/XHJS8/8/

在这里我得到了以前div的height和调整当前divs margin-top accordingly：

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++; 

};