Flexbox、z-index 和位置：静态：为什么不起作用？

Question

根据 flexbox 规范：

..4.3. Flex Item Z-Ordering ,... and z-index values other than auto create a stacking context even if position is static.

所以，我认为 z-index / opacity 应该像往常一样使用 flexbox 但当我将它应用到这个 HTML/CSS 它不起作用（我的目标是将 .header 放在 .core 之上创建两层）：

 .header {
   opacity: 0.5;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 .headerLeft {
   z-index: inherit;
   background-color: blue;
   text-align: right;
   align-self: stretch;
   flex: 2 1 250px;
 }
 .headerCenter {
   z-index: inherit;
   background-color: red;
   text-align: right;
   align-self: stretch;
   flex: 1 1 175px;
 }
 .headerRight {
   z-index: inherit;
   background-color: green;
   text-align: right;
   align-self: stretch;
   flex: 1 1 100px;
 }
 .core {
   z-index: 0;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
 }
 .coreItem {
   align-self: stretch;
   flex: 1 1 400px;
 }

<body>
  <div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerCenter">Center</div>
    <div class="headerRight">Right</div>
  </div>
  <div class="core">
    <div class="coreItem">Core1</div>
    <div class="coreItem">Core2</div>
    <div class="coreItem">Core3</div>
    <div class="coreItem">Core4</div>
    <div class="coreItem">Core5</div>
    <div class="coreItem">Core6</div>
  </div>
</body>

我在 flex 属性上使用了适当的前缀。我不明白为什么它不起作用。

Answer 1

正如您在问题中所写，元素 不需要 定位，z-index 才能在 flex 容器中工作。

即使 position: static，Flex 项目也可以参与 z-index 堆叠顺序，这对于其他 CSS 盒模型（网格除外）并非如此，其中仅 z-index适用于定位元素。

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

z-index 在您的代码中不起作用的原因是 div.header 和 div.core 不是弹性项目。它们是 body 的子代，但 body 不是弹性容器。

为了 z-index 在这里工作，您需要将 display: flex 应用到 body。

将此添加到您的代码中：

body {
    display: flex;
    flex-direction: column;
}

Revised Demo

更多详情：

Flexbox、z-index 和位置：静态：为什么不起作用？

Flexbox, z-index & position: static: Why isn't it working?

html

css

z-index

flexbox