Flexbox, z-index & position: static: Почему это не работает?

Согласно спецификации flexbox:

.. 4.3. Значения элементов Z-Order,... и z-index, отличные от auto создать контекст стекирования, даже если position - 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>

Ответ 1

Как вы писали в своем вопросе, элементы не должны располагаться для z-index для работы в контейнере flex.

Элементы Flex могут участвовать в порядке стекирования z-index даже с position: static, что неверно для других моделей полей CSS (кроме Grid), где z-index работает только с расположенными элементами.

4.3. Flex Item Z-Ordering

Элементы Flex отображаются точно так же, как и встроенные блоки, кроме что order -модифицированный заказ документа используется вместо необработанного документа порядок и z-index значения, отличные от auto, создают контекст стекирования даже если position static.

Причина z-index не работает в вашем коде, так это то, что div.header и div.core не являются гибкими. Они являются дочерними элементами body, но body не является гибким контейнером.

Для того, чтобы z-index работал здесь, вам нужно применить display: flex к body.

Добавьте это в свой код:

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

Пересмотренная демонстрация

Подробнее: fooobar.com/info/264890/...