Paulo Janeiro Paulo Janeiro - 2 years ago 558
HTML Question

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

According to flexbox specification:

..4.3. Flex Item Z-Ordering ,... and
values other than
create a stacking context even if

So, I thought
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
on top of
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;

<div class="header">
<div class="headerLeft">Left</div>
<div class="headerCenter">Center</div>
<div class="headerRight">Right</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>

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

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download