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

CSS ポッドキャスト - 019: Z-Index とスタック コンテキスト

たとえば、絶対位置に配置され、互いに上下に配置される要素があるとします。次のような 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 プロパティは、ブラウザの 3D 空間（Z 軸）に基づいて HTML のレイヤの順序を明示的に設定します。この軸は、どのレイヤがユーザーに近い場所または遠いかを示します。 ウェブの縦軸は Y 軸、横軸は X 軸です。

z-index プロパティには、正または負の数値を指定できます。z-index の値が高い場合、その要素は別の要素より上に表示されます。 要素に z-index が設定されていない場合、デフォルトの動作としてドキュメント ソースの順序によって Z 軸が決まります。つまり、ドキュメントより下にある要素は、その前の要素の上に配置されます。

通常のフローでは、z-index に特定の値を設定したにもかかわらず動作しない場合は、要素の position 値を static 以外に設定する必要があります。これは、z-index で苦労することがよくあります。

ただし、Flexbox またはグリッドのコンテキストを使用している場合は、そうではありません。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 値と auto ではない z-index 値が含まれるため、新しいスタック コンテキストが作成されました。つまり、.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 と position を適用する必要はありません。新しいスタック コンテキストを作成するには、新しい複合レイヤを作成するプロパティ（opacity、will-change、transform など）に値を追加します。詳しくは、プロパティの一覧をご覧ください。

合成レイヤとは何かを説明するために、ウェブページはキャンバスのようなものです。ブラウザで HTML と CSS を取得し、それらを使用してキャンバスのサイズを算出します。 次に、このキャンバスにページを描画します。要素の位置が変更された場合、ブラウザは元の画面に戻って、描画する対象を再計算する必要があります。

パフォーマンスを向上させるため、ブラウザではキャンバスの上に重ねられる新しい合成レイヤが作成されます。これらはポストイット ノートのようなものです。1 つを移動させて変更しても、キャンバス全体に大きく影響することはありません。 opacity、transform、will-change を持つ要素は変更される可能性が非常に高いため、新しい複合レイヤが作成されます。ブラウザは、GPU を使用してスタイルの調整を適用することで、変更のパフォーマンスを可能な限り確保します。

関連情報

• レイヤの強制適用
• アニメーション ガイド: 強制レイヤ作成
• Z-Index について

理解度チェック

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

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