Flexbox 项目重叠 z-index 设置在兄弟元素上

Question

我有一个 flexbox，里面有多个 children。每个 flex-item 都有一个 child 元素被下一个兄弟 flex-item 重叠。您如何纠正或解释这种行为？

这是相关行为的演示。 SO 上还有其他几个问题建议对组中的 :first-child 应用更大的 z-index。这有效 - 但仅适用于第一个元素。

.container {
  display: flex;
  background: #eee;
  margin-top: 5%;
  height: 100px;
  z-index: 1;
}

.container .flex-item {
  _flex: 0 0 1;
  width: 25%;
  height: 80px;
  margin: 10px;
  position: relative;
  background: #ccc;
  z-index: 500;
}

.container .flex-item .widget {
  width: 70px;
  height: 70px;
  background-color: #004990;
  border-radius: 50%;
  position: absolute;
  top: -35px;
  right: -35px;
}

<div class="container">
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>  
</div>

我有一个 codepen，它举例说明了所需的功能 https://codepen.io/barrychapman/pen/QWKLbKw - 但我让它工作的唯一方法是对列表中的每个元素依次递减 z-index。

如何在不需要 codepen 示例的情况下实现所需的行为？

Answer 1

您可以只删除除小部件气泡之外的每个项目的 z-index。这将导致气泡始终位于任何容器顶部的所需输出。

.container {
  display: flex;
  background: #eee;
  margin-top: 5%;
  height: 100px;
}

.container .flex-item {
  flex: 0 0 1;
  width: 25%;
  height: 80px;
  margin: 10px;
  position: relative;
  background: #ccc;
}

.container .flex-item .widget {
  width: 70px;
  height: 70px;
  background-color: #004990;
  border-radius: 50%;
  position: absolute;
  top: -35px;
  right: -35px;
  z-index:1;
}

<div class="container">
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>  
</div>

Answer 2

我可能没有正确理解问题。

但是，如果您从所有元素中删除 z-index 并仅在 .widget 元素上添加 z-index : 1，那么您将获得与该代码笔相同的结果。

https://codepen.io/barrychapman/pen/QWKLbKw

.widget {
 z-index: 1;
}

Flexbox 项目重叠 z-index 设置在兄弟元素上

Flexbox items are overlapping z-index set on sibling elements

html

css

flexbox

z-index