CSS：将动态大小的div叠加在一起（使用z-index）

Question

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

<div class="contentbox">
~content~
</div>
<div class="contentbox">
~content~
</div>
<div class="contentbox">
~content~
</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并将它们放在页面的下方？

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

Answer 1

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

在这里，我收到了之前height的{​​{1}}并调整了当前的div：

divs margin-top accordingly