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
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
