我试图了解z-index的工作原理。为了做到这一点，我创建了一个由五个div组成的简单示例。每个人都是前一个孩子，除了第一个孩子。我的目标是让第一个div（所有其他div的父容器）显示在所有其他div之上，有效地隐藏它们。
为了达到我的目标，我把z-index属性放在所有的div和父div上我放了一个夸大的值100，以确保它高于其他所有，但它似乎没有工作。
我已阅读了许多关于z-index的不同文档，并在Stack Overflow上阅读了大量答案。到目前为止，我尝试了以下内容：
尽管如此，我还没有成功地让父div出现在所有其他div之上。我做错了什么？
我用我刚才描述的例子创建了一个JSFiddle：https://jsfiddle.net/y8jfdz7w/15/。
.first {
position: absolute;
z-index: 100;
width: 500px;
height: 500px;
background-color: grey;
}
.second {
position: absolute;
z-index: 2;
width: 450px;
height: 450px;
top: 25px;
left: 25px;
background-color: orange;
opacity: 0.99;
}
.third {
position: absolute;
z-index: 3;
width: 400px;
height: 400px;
top: 25px;
left: 25px;
background-color: yellow;
opacity: 0.99;
}
.fourth {
position: absolute;
z-index: 20;
width: 350px;
height: 350px;
top: 25px;
left: 25px;
background-color: green;
opacity: 0.99;
}
.fifth {
position: absolute;
z-index: 5;
width: 300px;
height: 300px;
top: 25px;
left: 25px;
background-color: pink;
opacity: 0.99;
}<div class="first">
<div class="second">
<div class="third">
<div class="fourth">
<div class="fifth">
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：8)
实际答案：
根据您想要实现的目标（视觉上），您必须将要隐藏的元素放置在当前顶级父级的兄弟中，或者您必须依赖visibility来隐藏它们。
以下是父母同胞解决方案：
body{
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.first {
position: absolute;
z-index: 1;
width: 500px;
height: 500px;
background-color: grey;
animation: toggleOpacity 3s infinite;
}
.another-first {
z-index: 0;
}
.second {
position: relative;
z-index: 2;
width: 450px;
height: 450px;
top: 25px;
left: 25px;
background-color: orange;
opacity: 0.99;
}
.third {
position: absolute;
z-index: 3;
width: 400px;
height: 400px;
top: 25px;
left: 25px;
background-color: yellow;
opacity: 0.99;
}
.fourth {
position: absolute;
z-index: 20;
width: 350px;
height: 350px;
top: 25px;
left: 25px;
background-color: green;
opacity: 0.99;
}
.fifth {
position: absolute;
z-index: 5;
width: 300px;
height: 300px;
top: 25px;
left: 25px;
background-color: pink;
opacity: 0.99;
}
@-webkit-keyframes toggleOpacity {
0% { -webkit-transform: translateX(-150px); transform: translateX(-150px); }
50% { -webkit-transform: translateX(150px); transform: translateX(150px); }
100% {-webkit-transform: translateX(-150px);transform: translateX(-150px);}
}
@-moz-keyframes toggleOpacity {
0% { -moz-transform: translateX(-150px); transform: translateX(-150px); }
50% { -moz-transform: translateX(150px); transform: translateX(150px); }
100% {-moz-transform: translateX(-150px);transform: translateX(-150px);}
}
@-o-keyframes toggleOpacity {
0% { -o-transform: translateX(-150px); transform: translateX(-150px); }
50% { -o-transform: translateX(150px); transform: translateX(150px); }
100% {-o-transform: translateX(-150px);transform: translateX(-150px);}
}
@keyframes toggleOpacity {
0% { -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -o-transform: translateX(-150px); transform: translateX(-150px); }
50% { -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); transform: translateX(150px); }
100% {-webkit-transform: translateX(-150px);-moz-transform: translateX(-150px);-o-transform: translateX(-150px);transform: translateX(-150px);}
}<div class="first"></div>
<div class="another-first">
<div class="second">
<div class="third">
<div class="fourth">
<div class="fifth">
</div>
</div>
</div>
</div>
</div>
使用Vals'solution和您的原始标记，可以通过将z-index:auto应用于自身并将负z-index应用于其中来将任何div放在前面直接的孩子。这里的限制是它只能应用于一个级别。你无法用它完全反转堆栈（如果我们在JS中禁用重置行并单击2级和4级，则4级将高于3级但不高于2级）。这是片段，点击任何div：
window.ziToy = {
reset: false,
updateIndexes : function(){
$('div span').each(function(){
$(this).text($(this).parent().css('z-index'));
})
},
toggleReset : function () {
this.reset = !this.reset;
},
values:['-1','auto','1']
};
$('div').on('click', function(e){
e.stopPropagation();
if (window.ziToy.reset) {
$('div').css({'z-index':'auto'}); /*reset all divs*/
$(this).css({'z-index':'auto'});
$(this).children().css({'z-index':'-1'})
} else {
var toy = window.ziToy,
current = $(this).css('z-index'),
next = toy.values.indexOf(current) + 1;
$(this).css('z-index', toy.values[next % 3])
};
window.ziToy.updateIndexes();
});
window.ziToy.updateIndexes();body {
color: white;
font-weight: bold;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding: 0;
padding-top: 30px;
}
@media (max-height: 300px) {
body{
padding-top: 150px;
}
}
section {
width: 0;
height: 0;
overflow: visible;
left: -240px;
top: -160px;
position: relative;
z-index: 1;
}
.toggle {
position: absolute;
top:0;
left: 0;
padding: 15px;
color: #999;
font-weight: 400;
}
div {
position: absolute;
height: 150px;
width: 300px;
top: 30px;
left: 30px;
background-color: grey;
padding: 5px;
cursor: pointer;
}
div>div {
background-color: orange;
}
div>div>div {
background-color: darkred;
}
div>div>div>div {
background-color: green;
}
div>div>div>div>div {
background-color: pink;
}
div>span {float: right;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div><span></span>
<div><span></span>
<div><span></span>
<div><span></span>
<div><span></span>
</div>
</div>
</div>
</div>
</div>
</section>
<label class="toggle">
<input onchange="javascript: window.ziToy.toggleReset()" type="checkbox" />Reset all divs on click
</label>
更新了代码段，现在您可以停用divs z-index reset，以便能够切换-1，auto＆amp;的值。每个1独立的<div>。这可能有助于理解堆叠上下文原则，用我自己的话说明。
堆叠上下文原则：
每个家长都有一组position（非静态 ）和一组z-index（除 auto之外 ），在该特定z-index为其所有子项创建堆叠上下文。将其描绘为其子女的无限z-index 。无穷大完全放在父母的z-index。
让我们考虑参考项目A。无论z-index为A的任何子女，如果您z-index B {兄弟A）高于A的z B -index，B（以及A的所有子项）将在A以上，并高于z-index的所有子项。
当比较来自不同父母的z-index个孩子时，浏览器将始终根据父母的z-index:auto而不是孩子来决定。
如果您想在其父母下面发送一个孩子，请在父级上设置z-index，在孩子上设置为否定z-index。
重要提示：对具有否定WebView webView = (WebView) findViewById(R.id.invoice_web_view);
WebSettings webSettings = webView.getSettings();
webSettings.setBuiltInZoomControls(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setDefaultTextEncodingName("UTF-8");
的元素应用转换（尤其是3d）时，并非所有浏览器的行为都相同，您可能会遇到错误和不一致。例如，请参阅此un-aswered question。
答案 1 :(得分：4)
您可以通过z-index破解父元素后面的子元素。以下是一些方法：
但一般来说，您不能使用z-index将子元素放置在堆叠上下文的根元素后面。
但是，如果你可以改变HTML结构来制作div兄弟姐妹，那么你就可以全部设置：
.first {
z-index: 5;
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: grey;
}
.second {
z-index: 4;
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: orange;
}
.third {
z-index: 3;
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: yellow;
}
.fourth {
z-index: 2;
width: 350px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
.fifth {
z-index: 1;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
答案 2 :(得分：3)
z-index将相对于父级进行计算，因此一旦增加父级z-index，所有子级都将受到隐式影响。 没有办法可以使用z-index将子项隐藏在其父项后面。 z-index主要影响不同父母的兄弟姐妹或HTML元素。
答案 3 :(得分：2)
我不确定是否已经说过，有很多答案和评论。
您可以使用z-index执行此操作：父项为auto，直接子项为负值
这里是第一级：
body {
background-color: bisque;
}
.first {
position: absolute;
z-index: auto;
width: 500px;
height: 500px;
background-color: grey;
animation: togglePosition 3s infinite;
}
.second {
position: absolute;
z-index: -1;
width: 450px;
height: 450px;
top: 25px;
left: 25px;
background-color: orange;
opacity: 0.99;
animation: togglePosition 3s infinite -1.5s;
}
.third {
position: absolute;
z-index: 3;
width: 400px;
height: 400px;
top: 25px;
left: 25px;
background-color: yellow;
opacity: 0.99;
}
.fourth {
position: absolute;
z-index: 20;
width: 350px;
height: 350px;
top: 25px;
left: 25px;
background-color: green;
opacity: 0.99;
}
.fifth {
position: absolute;
z-index: 5;
width: 300px;
height: 300px;
top: 25px;
left: 25px;
background-color: pink;
opacity: 0.99;
}
@keyframes togglePosition {
0% { left: -150px; }
50% { left: 150px; }
100% { left: -150px;}
}<div class="first">
<div class="second">
<div class="third">
<div class="fourth">
<div class="fifth">
</div>
</div>
</div>
</div>
</div>
这里是第二级。在这里，需要删除不透明度。只是为了证明它不是所有在孩子之上的文件，只是相关部分（如果我理解评论确定）
.first {
position: absolute;
z-index: 100;
width: 500px;
height: 400px;
background-color: grey;
}
.second {
position: absolute;
z-index: auto;
width: 450px;
height: 300px;
top: 80px;
left: 25px;
background-color: orange;
}
.third {
position: absolute;
z-index: -1;
width: 400px;
height: 400px;
top: -50px;
left: 25px;
background-color: yellow;
opacity: 0.99;
}
.fourth {
position: absolute;
z-index: 20;
width: 350px;
height: 350px;
top: 25px;
left: 25px;
background-color: green;
opacity: 0.99;
}
.fifth {
position: absolute;
z-index: 5;
width: 300px;
height: 300px;
top: 25px;
left: 25px;
background-color: pink;
opacity: 0.99;
}<div class="first">
<div class="second">
<div class="third">
<div class="fourth">
<div class="fifth">
</div>
</div>
</div>
</div>
</div>
答案 4 :(得分：1)
子元素总是从父母那里继承z-index，如另一个答案所提到的那样！
但是，有一种解决方法..为子元素设置负z-index，并删除父元素上的一个元素以实现目标。
希望这有帮助！
答案 5 :(得分：0)
父元素z-index起作用。
在另一篇文章中可以看到，该脚本列出了所有父元素z-index，对于调试非常有用。
var el = document.querySelector('your elt');
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));