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

Question

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):

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

Answer 1

Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container.

Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) 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 reason 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: https://stackoverflow.com/a/35772825/3597276