I'm trying to overlay a div that would float with in a flexbox container.
The header is a flexbox container and there are three flexbox divs that work in the container. The overlay I want to overlay the other three divs but still be constrained within the .header flexbox container div.
I've tried multiple methods on stackoverflow and elsewhere, but how not seen a solution that addresses overlay or layering when used in conjunction flexbox.
Thank you for any suggestions!
Link to the jsfiddle of the following: Link
HTML:
<div class="header">
<div class="headerLeft">Left</div>
<div class="headerMiddle">Middle</div>
<div class="headerRight">Right</div>
<div class="overlay">Overlay</div>
</div>
CSS:
.header {
border: 3px solid orange;
width: 100%;
display: -webkit-flex;
display: flex;
z-index: 0;
}
.headerLeft {
border: 2px solid chartreuse;
-webkit-flex: 1;
flex: 1;
z-index: 1;
}
.headerMiddle {
border: 2px solid darkorchid;
-webkit-flex: 1;
flex: 1;
z-index: 1;
}
.headerRight {
border: 2px solid darkorange;
-webkit-flex: 1;
flex: 1;
z-index: 1;
}
.overlay {
border: 2px solid green;
z-index: 10;
background: rgba(0,0,0,0.3);
}
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 ).
Flexbox is inherently a one dimensional layout model. Flex items within a flex container can be laid out either horizontally or vertically, but not both. If you want to lay out items in both dimensions, you'll need to nest a flex container inside another one.
The flex-wrap property specifies whether the flex items should wrap or not.
Looking at all of your commented out code, you were on the right track with the relative positioning on the flex container. You just needed to absolutely position your overlay element.
http://jsfiddle.net/UHECE/4/
Add/uncomment these styles:
.header {
position: relative;
}
.overlay {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
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