Question

我希望将一些div叠加在一起，但另外就像普通的div一样。即我不想担心手动定位它们。这在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，完全相同的大小，没有拧紧现有布局。这可能吗？

Answer 1

/*position relative as a base for non-static elements*/
#outerDiv{
    position:relative;
}

/*every direct child positioned absolute*/
#outerDiv > div {
    position:absolute;
}

此时，它们将堆叠在另一个之上，后面的元素位于前一个之上。如果你想强迫前一个div高于下一个div，那么当你需要使z-index明确高于下一个时，#outerDiv将不会根据孩子延伸，因为它是＆＃39;从流程中取出。

如果您的#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;

Answer 2

HTML5中的Z-indexing就像它一直有效一样。您必须指定最有可能的位置，但对于分层本身，只要您指定z-index就会自动指定。

在z-index中将div叠加在一起的最佳方法是什么？

2 个答案: