我尝试将一个子 div 放置在其父级元素下方并位于其他元素上方。
.box1{
background-color: blue;
width: 500px;
height: 100px;
position: relative;
z-index: 3;
}
.box2{
position: absolute;
background-color: red;
width: 200px;
height: 100px;
left: 30%;
top: 20px;
z-index: 2;
}
.box3{
background-color: yellow;
width: 500px;
height: 100px;
z-index: 1;
}
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
我想将红色矩形放置在蓝色矩形下方和黄色矩形上方。我将 z-index 放在其中三个上。然而，这不起作用。
你怎么看待这件事？谢谢！
Update：虽然框的顺序是正确的，但是，现在无法单击这些框内的元素。
您可以在这里查看错误：https://jsfiddle.net/p1xd6zah/ https://jsfiddle.net/p1xd6zah/
你可以做一个hack with z-index:
你可以加z-index: -1 to box2。 （堆叠child以下parent)
Add z-index: -2 and position: relative to box3（现在堆叠这个behind box2)
去除z-index from box1- 请参阅下面的演示：
.box1 {
background-color: blue;
width: 500px;
height: 100px;
position: relative;
}
.box2 {
position: absolute;
background-color: red;
width: 200px;
height: 100px;
left: 30%;
top: 20px;
z-index: -1;
}
.box3 {
background-color: yellow;
width: 500px;
height: 100px;
z-index: -2;
position: relative;
}
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
