在 z 索引中将 div 层叠在一起的最佳方法是什么?



我想让一些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直接超级叠加在它上面,大小完全相同,而不会破坏现有的布局。这可能吗?

/*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将不会根据子级进行拉伸,因为它已从流中取出。


如果您的#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索引一如既往。您很可能需要指定位置,但对于分层本身,只要指定z索引,这都是自动的。

相关内容

最新更新