Flexbox, z-index и position: static: почему это не работает?
Согласно спецификации flexbox:
..4.3. Упорядочить пункт Z-Ordering, ... и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>Я использовал правильные префиксы в свойствах flex. Я не понимаю, почему это не работает.