将 z-index:-1
放入 absolute-child 中,使 div 在祖 parent 之下。如何让绝对子级位于父级 div 而不是祖父级 div 之下?
.grandparent{
background:rgba(0, 128, 0, 0.89);
width:500px;
}
.parent{
position:relative;
width:200px;
height:200px;
background:yellow;
}
.absolute-child{
position:absolute;
width:100px;
height:100px;
background:red;
top:10px;
right:-50px;
z-index:-1;
}
<div class="grandparent">
<div class="parent">
<div class="absolute-child"> absolute ch
</div>
<div class="siblings">siblings</div>
</div>
</div
最佳答案
这就是你想要的,将 position: relative;
添加到祖 parent ,这样 z-index: 0;
就可以了。
.grandparent{
background:rgba(0, 128, 0, 0.89);
width:500px;
z-index: 0;
position: relative;
}
.parent{
position:relative;
width:200px;
height:200px;
background:yellow;
}
.absolute-child{
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 10px;
right: -50px;
z-index: -1;
}
<div class="grandparent">
<div class="parent">
<div class="absolute-child"> absolute ch
</div>
<div class="siblings">siblings</div>
</div>
</div
关于html - z 索引为 -1 的元素位于祖 parent 的 div 之下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46558871/