Наложение / наведение div в div контейнера flexbox

Я пытаюсь наложить div, который будет плавать в контейнере flexbox.

Заголовок представляет собой контейнер flexbox, и в нем работают три элемента div flexbox. Наложение, которое я хочу наложить на остальные три блока div, но все же оно должно быть ограничено внутри блока контейнера flexbox .header.

Я пробовал несколько методов в stackoverflow и в других местах, но как не видел решения, которое устраняет наложение или наслоение при использовании в сочетании с flexbox.

Спасибо за любые предложения!

Ссылка на jsfiddle следующего: Ссылка

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