フレックスボックスコンテナdivのオーバーレイ/ホバーdiv

Question

フレックスボックスコンテナで浮動するdivをオーバーレイしようとしています。

ヘッダはフレックスボックスコンテナで、コンテナ内で動作する3つのフレックスボックスdivがあります。オーバーレイは、他の3つのdivをオーバーレイしたいが、.header flexboxコンテナdiv内にまだ制約があります。

私はstackoverflowや他の場所で複数のメソッドを試しましたが、フレックスボックスで使用するとオーバーレイやレイヤーを解決するソリューションは見えませんでした。

ありがとうございます！ 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：次のjsfiddleに

リンク

.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

あなたのコメントアウトコードのすべてを見て、あなたは正しい軌道に乗っていましたフレックスコンテナ上に相対的な位置決めを行う。オーバーレイ要素を絶対に配置する必要があります。

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

追加/コメント解除これらのスタイル：

.header { 
    position: relative; 
} 

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