Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?
css, flexbox
Solution
Ok, just realized z-index only works with positioned elements.
In the case presented, I needed to set the height of the container of the div .overlay (just put height:100% in .bodybox)
All is good now.
Problem
Haven't managed to stack divs when creating a flexbox layout. Either they push each other within the container div, or I have to use `"position:absolute"` on the overlay which gets the div out of its container context. z-indices seem to not work at all. I am using chrome latest version and was expecting this behaviour: http://dev.w3.org/csswg/css-flexbox/#painting Here is a plunker with a basic flexbox layout: http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview to illustrate. You will have to comment/uncomment the positioning in the definition of the `.overlay` class which is in the css.