为什么 flex-item 的 z-index 不能与 Safari 中的“溢出：隐藏”一起使用？答案

【问题标题】：Why would a flex-item's z-index not work with 'overflow: hidden' in Safari?为什么 flex-item 的 z-index 不能与 Safari 中的“溢出：隐藏”一起使用？
【发布时间】：2019-07-13 16:34:51
【问题描述】：

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

非常感谢。

【问题讨论】：

标签： css safari flexbox overflow

【解决方案1】：

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

【讨论】：