Paulo Janeiro Paulo Janeiro - 7 months ago 171
HTML Question

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

According to flexbox specification:


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


So, I thought
z-index
/
opacity
is supposed to work as usual with flexbox but when I apply it to this HTML/CSS it doesn't work (my goal was to put
.header
on top of
.core
creating two layers):



.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>





I used proper prefixes on flex properties. I don't understand why it's not working.

Answer

Like you wrote in your question, elements do not need to be positioned for z-index to work in flexbox. Flex items can participate in a z-index stacking order even with position: static (which is not true for other box models where z-index only works on positioned elements).

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.

The reasons z-index isn't working in your code is that div.header and div.core are not flex items. They are children of body, but body is not a flex container.

In order for z-index to work here, you'll need to apply display: flex to body.

Add this to your code:

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

Revised Demo

More details: http://stackoverflow.com/a/35772825/3597276

Comments