时间戳

首页 > 解决方案 > 为什么 flex-item 的 z-index 不能与 Safari 中的“溢出：隐藏”一起使用？

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

问题描述

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

非常感谢。

标签： csssafariflexboxoverflow

解决方案

您可以尝试.pink为.blue. 希望这可以帮助。干杯！

推荐阅读