web-dev-qa-db-ja.com

フレックスボックス、Z-インデックスおよび位置：静的：なぜ機能しないのですか？

flexbox仕様によると：

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

ので、私は考えました z-index/opacityはflexboxで通常どおり機能するはずですが、このHTML/CSSに適用すると機能しません（私の目的は.header の上に .core 2つのレイヤーを作成する）：

 .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>

フレックスプロパティに適切なプレフィックスを使用しました。なぜ機能しないのかわかりません。

htmlcssz-indexflexbox
15
Paulo Janeiro

質問で書いたように、フレックスコンテナでz-indexを機能させるには、要素を配置しない必要があります。

Flexアイテムはz-indexのスタッキングオーダーに参加できますが、position: staticを使用しても他のCSSボックスモデル（グリッドを除く）には当てはまりません。z-indexは配置された要素でのみ機能します。

4.3。フレックスアイテムのZ-Ordering

Flexアイテムペイントはインラインブロックとまったく同じですが、orderで変更されたドキュメントの順序が生のドキュメントの順序の代わりに使用され、auto以外のz-indexの値がスタックコンテキストを作成します。 positionがstaticであっても。

コードでz-indexが機能しないのは、div.headerとdiv.coreがフレックスアイテムではないためです。これらはbodyの子ですが、bodyはフレックスコンテナーではありません。

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

これをコードに追加します。

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

改訂されたデモ

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

15
Michael_B