在z-index中将div分层叠加的最佳方式是什么？ [英] What's the best way to layer divs on top of one another in z-index?

问题描述

我想将一些div堆叠在一起，但像其他普通div一样行事。即我不想担心手动定位它们。这可能在HTML5 / CSS3？

例如：

  < div id ='outerDiv'> 
< div id ='inner1'style ='z-index：1'>这应该是outerDiv的完整大小< / div> 
< div id ='inner2'style ='z-index：2'>这应该出现在inner1< / div> 
< / div> 
  

我希望有一个简单的方法可以做到这一点。

$ b $换句话说，假设我已经有一个页面布局和完美，但我想要一个已经定位的div，并且直接在它的上面直接添加另一个div，大小完全一样，没有向上拧现有的布局。这可能吗？

解决方案

  / *相对位置作为非静态元素的基础* / 
 #outerDiv {
 position：relative; 
} 
 
 / *每个直接的孩子定位绝对* / 
 #outerDiv> div {
 position：absolute; 
} 
  

此时，它们将叠加在另一个之上，之后的更多元素。如果你想强制一个先前的div高于下一个，那么当你需要明确地高于 z-index 时，下一个

---

#outDiv 不会根据孩子延伸。如果您的 #outerDiv 具有尺寸（宽度和高度），并且您希望将这些孩子拉伸到该尺寸，请添加到孩子：

  //您可能遇到盒子模型问题。如果孩子有边框和填充
身高：100％; 
宽度：100％; 
  

或

  //这将包含填充和边框，但我不确定它们的副作用是什么
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
  

I want to have some divs stacked on top of one another, but act otherwise like a normal div. I.e. I don't want to have to worry about manually positioning them. Is this possible in HTML5/CSS3?

For example:

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

I hope there's a simple way to do this.

To put it another way, suppose I already have a page laid-out and perfect, but I want to take one already-positioned div and super-impose another div directly on top of it, exactly the same size, without screwing the existing layout up. Is this possible?

解决方案

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

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

at this time, they will be stacked on top of the other, with the more later element on top of the previous. if you want to force a previous div to be above the next, this is when you need to make it's z-index explicitly higher then the next the #outerDiv will not stretch according to the children since it's taked out of the flow.

---

if your #outerDiv has dimensions (width and height), and you want to stretch the children to it, then add to the children:

//you might run into box model issues esp. if children have borders and padding
height:100%;
width:100%;

or

//this will contain paddings and borders, but i'm not sure what their side-effects are
top:0;
left:0;
right:0;
bottom:0;

这篇关于在z-index中将div分层叠加的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！