Menu
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.
549
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
The flex-basis property The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis . If the items don't have a size then the content's size is used as the flex-basis.
You need a content-first design : Flexbox is the ideal layout system to create web pages if you don't know exactly how your content is going to look, so if you want everything just to fit in, flexbox is perfect for that.
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.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
