web-dev-qa-db-ja.com

flexbox containerdivのdivをオーバーレイ/ホバーします

flexboxコンテナでフロートするdivをオーバーレイしようとしています。

ヘッダーはflexboxコンテナーであり、コンテナーで機能する3つのflexbox divがあります。オーバーレイ他の3つのdivをオーバーレイしたいのですが、まだ制約されています.header内flexboxコンテナdiv。

私は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);
}
htmlcssoverlayflexbox
12
karlgo

コメントアウトされたすべてのコードを見ると、フレックスコンテナの相対的な位置が正しい方向に進んでいます。オーバーレイ要素を絶対的に配置する必要がありました。

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

これらのスタイルを追加/コメント解除します。

.header {
    position: relative;
}

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