.wrap {
width: 400px;
height: 200px;
position: relative;
display: flex;
}
.blue, .pink {
height: 150px;
width: 400px;
}
.blue {
background: lightblue;
z-index: 1;
overflow: hidden;
}
.pink {
background: pink;
position: absolute;
left: 0;
bottom: 0;
}
<div class="wrap">
<div class="blue">blue</div>
<div class="pink">pink</div>
</div>
wrap元素的display: flex;
在BFC中生成蓝色元素,因此我将z-index: 1;
添加到蓝色元素中,使其位于粉红色元素的顶部。但是在我将overflow: hidden;
添加到蓝色元素之后,它的z-index在Safari中不起作用,而在Chrome中它完全没问题。
非常感谢你。
您可以尝试为.pink
添加负z-index值,为.blue
添加更高的值。希望这可以帮助。干杯!