The CSS Podcast - 019: Z-Index とスタッキング コンテキスト
複数の要素が確実に配置されているとします 2 つの要素を重ねて配置することが想定されています 次のような HTML を記述できます。
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
では、デフォルト状態ではどちらのレベルがもう一方のレベルに重なって配置されるのでしょうか。 どのアイテムでこの操作を行えるかを知るには、 Z-Index とスタッキングのコンテキストを理解する必要があります。
Z-Index
z-index
プロパティを使用して、HTML のレイヤの順序を、ブラウザの 3D 空間(Z 軸)を基準として明示的に設定します。
この軸は、どのレイヤが近くにあるか、遠いかを示します。
ウェブでは縦軸が Y 軸、横軸が X 軸です。
z-index
プロパティには、正または負の数値を指定できます。
z-index
の値が大きい要素は、別の要素の上に表示されます。
要素に z-index
が設定されていない場合
デフォルトの動作では、ドキュメント ソースの順序によって Z 軸が決まります。
つまり、ドキュメントの下側にある要素が、その前にある要素の上に配置されます。
通常のフローでは
z-index
に特定の値を設定しても機能しない場合、
要素の position
の値を static
以外に設定する必要があります。
これはz-index
に関してよく苦労する部分です。
しかしフレックスボックスやグリッドのコンテキストでは
これは、position: relative
を追加せずに Flex またはグリッド アイテムの Z-Index を変更できるためです。
負の Z-Index
要素を別の要素の背後に設定するには:
z-index
に負の値を追加します。
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
.my-element
の z-index
の初期値が auto
である限り、
.child
要素がその背後に配置されます。
次の CSS を .my-element
に追加します。
.child
要素はその後ろに配置されません。
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
.my-element
に static
以外の position
値が含まれるため
z-index
の値が auto
でない場合、
新しいスタッキング コンテキストが作成されました。
つまり、.child
の z-index
を -999
に設定した場合でも、
まだ .my-parent
の後ろには配置されません。
コンテキストのスタッキング
スタック コンテキストとは、共通の親を持ち、一緒に Z 軸を上下に移動する要素のグループです。
この例では
最初の親要素の z-index
が 1
である。
新しいスタック コンテキストが作成されます。
その子要素の z-index
が 999
である。
この親の隣には、1 つの子を持つ別の親要素があります。
親の z-index
が 2
で、子要素の z-index
も 2
である。
どちらの親もスタック コンテキストを作成するため、
すべての子の z-index
は、親の z-index
に基づきます。
スタック コンテキスト内の要素の z-index
常に、自身のスタック コンテキストにおける親の現在の順序が基準になります。
スタック コンテキストの作成
新規作成するために z-index
と position
を適用する必要はありません
スタック コンテキスト。
新しい複合レイヤを作成するプロパティの値を追加すると、新しいスタック コンテキストを作成できます。
opacity
、will-change
、transform
など。
Google Chat では
宿泊施設の一覧はこちらでご確認ください。
複合レイヤとは何かを説明するために、ウェブページがキャンバスであるとします。 ブラウザは HTML と CSS を取得し、キャンバスのサイズを計算して使用します。 次に、ページをこのキャンバスに描画します。 要素を変更する場合 位置が変わります。ブラウザは戻って、描画する対象をやり直す必要があります。
パフォーマンスを高めるために
ブラウザは新しい複合レイヤを作成し、キャンバスの上にレイヤを重ねます。
これは付箋メモに似ています。
キャンバス全体に大きな影響を与えません
opacity
を持つ要素用に新しい複合レイヤが作成されます。
transform
と will-change
は変更される可能性が非常に高いため、
ブラウザは、GPU を使用してスタイル調整を適用することで、可能な限り高いパフォーマンスを維持します。
リソース
理解度をチェックする
Z-Index に関する知識をテストする
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
デフォルトで一番上に表示されているのはどの記事ですか?
Z-Index が機能しない場合、要素のどのプロパティを確認すればよいですか。
display
relative
animation
position
Flexbox と Grid には position: relative
が必要ですか?