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

};