Overlay/Hover ein Div in Flexbox-Container div

Question

Ich versuche, ein div zu überlagern, die in einem Flexbox-Container schweben würde.

Der Header ist ein Flexbox-Container und es gibt drei Flexbox-Divs, die im Container arbeiten. Das Overlay Ich möchte die anderen drei divs überlagern, aber immer noch innerhalb der .header flexbox container div eingeschränkt sein.

Ich habe mehrere Methoden auf Stackoverflow und anderswo ausprobiert, aber wie eine Lösung, die Overlay oder Layering in Verbindung mit Flexbox behandelt adressiert.

Vielen Dank für Anregungen!

Link zur jsfiddle der folgenden Möglichkeiten: 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

Mit Blick auf alle Ihre kommentierte heraus Code, Sie waren auf dem richtigen Weg mit der relativen Positionierung auf dem Flex-Container. Sie mussten nur Ihr Overlay-Element absolut positionieren.

http://jsfiddle.net/UHECE/4/

Add/uncomment diese Stile:

.header { 
    position: relative; 
} 

.overlay { 
    position: absolute; 
    left: 0; top: 0; right: 0; bottom: 0; 
}