Flexbox with div overlays

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;
    /* -webkit-box-orient: horizontal; */
    z-index: 0;
    position: relative;
    /* position: absolute; */
}

.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;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    /* top: 0; left: 0; */
    /* width: 100%; height: 100%; */
    /* display: -webkit-flex; */
    /* flex-align: center; flex-pack: center; */
    /* display: block; */
    /* clear: both; */
    background: rgba(0,0,0,0.3);
}