フレックスボックス、Z-インデックス＆ポジション：静的：なぜ機能していないのですか？

フレックスボックス仕様による：フレックスボックス、Z-インデックス＆ポジション：静的：なぜ機能していないのですか？

..4.3。フレックスアイテムZオーダー、... z-index auto以外の値は、positionがstaticであってもスタッキングコンテキストを作成します。

だから、私はz-indexが/ opacityフレキシボックスでいつものように動作するようになっていると思ったが、私はそれが動作しないこのHTML/CSSにそれを適用するときに（私の目標は、二つの層を作成.coreの上に.headerを置くことでした）：私はフレックス性質上、適切な接頭辞を使用

.header { 
 
    opacity: 0.5; 
 
    z-index: 2; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
} 
 
.headerLeft { 
 
    z-index: inherit; 
 
    background-color: blue; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 2 1 250px; 
 
} 
 
.headerCenter { 
 
    z-index: inherit; 
 
    background-color: red; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 1 1 175px; 
 
} 
 
.headerRight { 
 
    z-index: inherit; 
 
    background-color: green; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 1 1 100px; 
 
} 
 
.core { 
 
    z-index: 0; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
.coreItem { 
 
    align-self: stretch; 
 
    flex: 1 1 400px; 
 
}

<body> 
 
    <div class="header"> 
 
    <div class="headerLeft">Left</div> 
 
    <div class="headerCenter">Center</div> 
 
    <div class="headerRight">Right</div> 
 
    </div> 
 
    <div class="core"> 
 
    <div class="coreItem">Core1</div> 
 
    <div class="coreItem">Core2</div> 
 
    <div class="coreItem">Core3</div> 
 
    <div class="coreItem">Core4</div> 
 
    <div class="coreItem">Core5</div> 
 
    <div class="coreItem">Core6</div> 
 
    </div> 
 
</body>

。なぜそれが動作していないのか分かりません。

出典

2015-10-28 Paulo Janeiro

あなたの質問に書いたように、要素はありませんフレックスコンテナで動作するためにz-indexのために配置する必要があります。

フレックスアイテムは、position: staticでもスタッキングオーダーに参加できます。z-indexが配置された要素に対してのみ動作する他のCSSボックスモデル（グリッド以外）では該当しません。

4.3. Flex Item Z-Ordering

フレックス項目はスタッキングコンテキストを作成autoよりorder変性文書順は、生文書順序の代わりに使用されていることを除き、インラインブロックと全く同じペイント、及びz-index値他のたとえpositionがstaticであっても。

z-indexはあなたのコードで働いていない理由は、div.headerとdiv.coreフレックスアイテムではないということです。彼らはbodyの子供ですが、bodyはフレックスコンテナではありません。

z-indexをここで動作させるには、display: flexをbodyに適用する必要があります。

あなたのコードにこれを追加します。

body { 
    display: flex; 
    flex-direction: column; 
}

Revised Demo

詳細：https://stackoverflow.com/a/35772825/3597276

出典

2015-10-28 15:07:26

フレックスボックス、Z-インデックス＆ポジション：静的：なぜ機能していないのですか？

答えて

関連する問題