我有一个容器 div，它有background-color: red;。这个容器大约有 12 个孩子，最后一个孩子有background-color: blue;。我试图将容器移到孩子的顶部background-color: blue。我为容器使用了更高的 z-index，但它仍然位于子项后面。
.no1 {
width: 800px;
height: 300px;
background-color: red;
position: relative;
z-index: 999;
}
.no2 {
position: relative;
width: 500px;
height: 200px;
background-color: blue;
z-index: 1;
}
.no3 {
position: relative;
}
.no4 {
position: relative;
}
.no5 {
position: relative;
}
<div class="no1">
<div>
<div>
<div class="no3">
<div>
<div class="no4">
<div>
<div>
<div>
<div class="no5">
<div class="no2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是 JSFiddle
您可以从父级中删除 z-index 并给子级一个负 z-index
.no1 {
width:800px;
height:300px;
background-color:red;
position:relative;
}
.no2 {
position:relative;
width:500px;
height:200px;
background-color:blue;
z-index: -1
}
.no3 {
position:relative;
}
.no4 {
position:relative;
}
.no5 {
position:relative;
}
<div class="no1">
<div>
<div>
<div class="no3">
<div>
<div class="no4">
<div>
<div>
<div>
<div class="no5">
<div class="no2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
