css - 为什么 flex-item 的 z-index 不能在 Safari 中使用 'overflow: hidden'？

Question

.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 中则完全可以。

非常感谢。

Answer 1

您可以尝试为 .pink 添加负 z-index 值，为 .blue 添加更高的值。希望这可以帮助。干杯!