为什么flex-item的z-index不适用于Safari中的'overflow:hidden'?

问题描述 投票:0回答:1

.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 css3 safari flexbox overflow
1个回答
-1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.