html - Overlay / hover a div in flexbox container div

Question

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);
}

Answer 1

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;
}