我想让一些 div 相互堆叠，但在其他方面表现得像一个普通的 div。 IE。我不想担心手动定位它们。这在 HTML5/CSS3 中可行吗？
例如：
<div id='outerDiv'>
<div id='inner1' style='z-index: 1'>This should be the full size of outerDiv</div>
<div id='inner2' style='z-index: 2'>This should appear overtop of inner1</div>
</div>
我希望有一个简单的方法来做到这一点。
换句话说，假设我已经有一个布局完美的页面，但我想取一个已经定位的 div 并将另一个 div 直接叠加在它上面，大小完全相同，无需拧紧现有的布局起来。这可能吗？
【问题讨论】：
/*position relative as a base for non-static elements*/
#outerDiv{
position:relative;
}
/*every direct child positioned absolute*/
#outerDiv > div {
position:absolute;
}
此时，它们将堆叠在另一个之上，更晚的元素在前一个之上。如果你想强制前一个 div 高于下一个，这是当你需要使其z-index 显式高于下一个时，#outerDiv 不会根据子级进行拉伸，因为它已从流程中取出。
如果您的#outerDiv 具有尺寸（宽度和高度），并且您想将孩子拉伸到它，那么添加到孩子：
//you might run into box model issues esp. if children have borders and padding
height:100%;
width:100%;
或
//this will contain paddings and borders, but i'm not sure what their side-effects are
top:0;
left:0;
right:0;
bottom:0;
【讨论】：
HTML5 中的 Z-indexing 与往常一样工作。您必须最有可能指定位置，但至于分层本身，只要您指定 z-index，这都是自动的。
【讨论】：