CSS 如何使子元素的 z-index 高于父元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16057361/
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
How to make child element higher z-index than parent?
提问by Afshin Mehrabani
Suppose I have this code:
假设我有这个代码：
<div class="parent">
<div class="child">
Hello world
</div>
</div>
<div class="wholePage"></div>
This jsFiddle: http://jsfiddle.net/ZjXMR/
这个jsFiddle：http: //jsfiddle.net/ZjXMR/
Now, I need to have<div class="child">in above of <div class="wholePage">but in the jsFiddle you can see that the child element rendered before <div class="wholePage">.
现在，我需要<div class="child">在上面的<div class="wholePage">，但在的jsfiddle你可以看到，子元素之前渲染<div class="wholePage">。
If you remove the parentclass positionor z-index, everything works fine. This is the correct behavior that I need: http://jsfiddle.net/ZjXMR/1/
如果删除parent类positionor z-index，一切正常。这是我需要的正确行为：http: //jsfiddle.net/ZjXMR/1/
How can I do that with z-indexand without removing anything from page?
如何在有z-index和没有从页面中删除任何内容的情况下做到这一点？
采纳答案by Kyle
This is impossible as a child's z-indexis set to the same stacking index as its parent.
这是不可能的，因为子项z-index设置为与其父项相同的堆叠索引。
You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.
您已经通过从父元素中删除 z-index 来解决问题，保持原样或使元素成为兄弟元素而不是子元素。
回答by MythThrazz
To achieve what you want without removing any styles you have to make the z-index of the '.parent' class bigger then the '.wholePage' class.
为了在不删除任何样式的情况下实现您想要的效果，您必须使 '.parent' 类的 z-index 大于 '.wholePage' 类。
.parent {
position: relative;
z-index: 4; /*matters since it's sibling to wholePage*/
}
.child {
position: relative;
z-index:1; /*doesn't matter */
background-color: white;
padding: 5px;
}
jsFiddle: http://jsfiddle.net/ZjXMR/2/
jsFiddle：http: //jsfiddle.net/ZjXMR/2/
回答by Greg Benner
Give the parent z-index: -1, or opacity: 0.99
给父 z-index：-1，或不透明度：0.99
回答by supermasher
Nothing is impossible. Use the force.
没有什么是不可能的。用力。
.parent {
position: relative;
}
.child {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
回答by Priyanshu Chauhan
Use non-static position along with greater z-index in child element:
在子元素中使用非静态位置和更大的 z-index：
.parent {
position: absolute
z-index: 100;
}
.child {
position: relative;
z-index: 101;
}
回答by Carlos Aleman
Try using this code, it worked for me:
尝试使用此代码，它对我有用：
z-index: unset;
