Z-Index とスタッキング コンテキスト

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 について

理解度をチェックする

Z-Index に関する知識をテストする

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>