我用了jsfiddle重新创建我的问题。我希望 .top .inside 位于 .bottom .inside 之上。我知道 z-index 仅适用于其各自的位置类型，即固定和绝对不占据相同的 z-index 状态，但是如果我有两个具有相同 z-index 的固定 parent ，有没有办法让 child 根据我想要的位置，使用不同的 z 索引进行绝对定位？即使我必须使用 jQuery/javascript？
html:
<body>
<div class="fixed top">
<div class="inside">I am inside a fixed element</div>
</div>
<div class="fixed bottom">
<div class="inside">I am inside a fixed element</div>
</div>
</body>
CSS:
.fixed {
margin: auto;
position: fixed;
width: 100%;
z-index: 111;
}
.top {
background: #222;
height: 150px;
top: 0;
}
.bottom {
background: #555;
height: 58px;
top: 100px;
}
.inside {
background: #770000;
margin: auto;
padding: 20px;
position: absolute;
right: 0;
left: 0;
width: 200px;
}
.top .inside {
background: #770000;
top: 70px;
z-index: 999;
}
.bottom .inside {
background: #007700;
z-index: 1;
}
最佳答案
现在两个元素都是同级元素，因此它们位于相同的堆栈上下文中。但是，它们也都从 .fixed 类获取 z 索引，即 111。
要查看上面的top，您需要添加高于 111 的 z-index:
.top {
background: #222;
height: 150px;
top: 0;
z-index: 112;
}
编辑:
定位元素创建自己的堆叠上下文，其中该上下文中的所有内容都相对于基本节点进行 z 索引。因此，由于两个父元素都已定位，因此它们创建了一个堆叠上下文。因此，它们内部事物的 zindex 不会跨上下文相关，而是作为一个整体上下文由最顶层的节点委托(delegate)给。
关于javascript - 当父元素固定且具有相同的 z 索引时，子元素 z 索引不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34343753/