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

【问题标题】：Flexbox, z-index & position: static: Why isn't it working?Flexbox、z-index 和位置：静态：为什么它不起作用？
【发布时间】：2016-01-28 05:53:15
【问题描述】：

根据 flexbox 规范：

..4.3. Flex Item Z-Ordering ,... 和 z-index 值不是即使position 是static，auto 也会创建一个堆叠上下文。

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

 .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 属性上使用了适当的前缀。我不明白为什么它不起作用。

【问题讨论】：

标签： html css z-index flexbox

【解决方案1】：

就像您在问题中所写的那样，元素不需要定位为z-index 在弹性容器中工作。

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

4.3. Flex Item Z-Ordering

Flex 项目的绘制与内联块完全相同，除了 order-modified 文档顺序用于代替原始文档顺序和z-index 以外的auto 值创建堆叠上下文即使position 是static。

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

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

将此添加到您的代码中：

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

Revised Demo

【讨论】：