Flexbox, z-index & position: статический: почему он не работает?

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

..4.3. Flex Item Z-Заказ ,... и z-index значения, чем auto создать контекст укладки, даже если 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. Я не понимаю, почему это не работает.

12
css css3 flexbox html z-index

1 ответов

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

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

4.3. Flex Item Z-Заказ

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;
}

Пересмотрел Демо

больше деталей:https://stackoverflow.com/a/35772825/3597276

13