.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>
display: flex;
的 wrap 元素使 BFC 中的蓝色元素,所以我在蓝色元素中添加了 z-index: 1;
使其位于顶部的粉红色元素。但是在我将 overflow: hidden;
添加到蓝色元素之后,它的 z-index 在 Safari 中不起作用,而在 Chrome 中则完全可以。
非常感谢。
最佳答案
您可以尝试为 .pink
添加负 z-index 值,为 .blue
添加更高的值。希望这可以帮助。干杯!
关于css - 为什么 flex-item 的 z-index 不能在 Safari 中使用 'overflow: hidden'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54778683/