Html 是否可以使用 z-index 在其父元素后面有一个子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3616587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to have a child element behind his parent element with z-index
提问by Roch
I would like to know if it possible to have a child element behind his parent element with z-index.
我想知道是否有可能在他的父元素后面有一个带有 z-index 的子元素。
I would like to use the parent div as transparent color layer on top of his content.
我想在他的内容之上使用父 div 作为透明颜色层。
回答by guari
Why not? Sure you can, and it's easy:
为什么不？当然可以，而且很简单：
- give a non-static position to your desired elements;
- set
z-indexof child to-1; - create a stacking context on the main container (by setting on it a
z-index,opacity,transformsor whatelse generates a composite layer).
- 给你想要的元素一个非静态的位置；
- 设定
z-index孩子的-1; - 创建主容器上的堆叠上下文（通过在其上设置一个
z-index，opacity，transforms或whatelse产生一个复合层）。
.container {
position: absolute;
z-index: 0; /* or eg. opacity: 0.99;*/
background-color: blue;
color: lightblue;
width: 100%;
height: 100%;
text-align: center;
}
.parent {
position: relative;
background-color: rgba(100, 255, 150, 0.75);
color: green;
width: 50%;
height: 30%;
top: 30%;
left: 20%;
}
.child {
position: absolute;
z-index: -1;
background-color: orange;
color: yellow;
width: 100%;
height: 100%;
top: -50%;
left: 20%;
}<div class="container">
<span>container</span>
<div class="parent">
<span>parent</span>
<div class="child">
<span>child</span>
</div>
</div>
</div>(if the parent is used as a transparent layer, be sure to use a background-imageor rgba background-color: children inherit the opacityof the parent)
（如果父级用作透明层，请务必使用 abackground-image或 rgba background-color：子级继承opacity父级的）
回答by David Newcomb
The short answer is Yes ;) There is an excellent article here that describes how you can use the stacking order of elements to allow the z-index to be negative in order to place an element behind it's parent.
简短的回答是 ;) 这里有一篇很棒的文章，描述了如何使用元素的堆叠顺序来允许 z-index 为负，以便将元素放在其父元素的后面。
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
回答by Strelok
Not possible, because each positioned element creates a stacking context.
不可能，因为每个定位的元素都会创建一个堆叠上下文。
回答by Gilsham
You could just do it the other way and use the child as the overlay like this
你可以用另一种方式来做，像这样使用孩子作为覆盖
HTML
HTML
<div id="stuff"><div class="overlay"></div>
<p>
Cras venenatis ornare tincidunt. Nam laoreet ante sed nibh pretium nec gravida turpis dapibus. Curabitur lobortis; lacus sit amet rutrum aliquet, est massa feugiat lectus, bibendum eleifend velit metus vitae dolor! Duis vulputate mi vitae quam fermentum pharetra.
</p>
</div>
CSS
CSS
#stuff{
position:relative;
}
.overlay{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:#ACA;
opacity:0.4;
}
回答by WynandB
While this wouldn't necessarily work in all browsers (especially older ones), the following has worked for me in the past:
虽然这不一定适用于所有浏览器（尤其是旧浏览器），但以下内容在过去对我有用：
#child {
position: relative;
z-index: -1;
...
}
I'm really only suggesting this as a last resort and would still prefer to use any technique other than this, although it might be ideal in your scenario.
我真的只是建议将此作为最后的手段，并且仍然更喜欢使用除此之外的任何技术，尽管它在您的场景中可能是理想的。
