我使用jsfiddle重新创建了我的问题。我希望.top .inside在.bottom .inside之上。我知道z-index仅适用于其各自的位置类型，即固定和绝对不占据相同的z-index状态，但是如果我的两个固定父级都具有相同的z-index，是否有办法让孩子定位绝对值不同的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-index 111。
要查看top以上内容，您需要添加一个大于111的z-index：
.top {
background: #222;
height: 150px;
top: 0;
z-index: 112;
}
编辑：
定位的元素创建它们自己的堆栈上下文，其中该上下文中的所有内容都相对于基本节点进行z索引。因此，由于两个父元素均已定位，所以它们创建了堆栈上下文。因此，它们内部事物的zindex不会在上下文之间是相对的，而是将整个上下文由最高节点委托给整个上下文。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句