Z-indexとスタッキングコンテキスト
z-indexを使って要素の重なり順を制御し、スタッキングコンテキストを理解します。
「Z-indexとスタッキングコンテキスト」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
z-indexとは
z-index は、Z軸（手前から奥）に沿ったposition指定済み要素の重なり順を制御します。要素が重なったときは、値の大きい要素が値の小さい要素の上に表示されます。
z-indexは位置指定された要素でのみ機能します
z-indexはposition: static（デフォルト）の要素には影響しません。z-indexを適用するには、relative、absolute、fixed、またはstickyを指定する必要があります。
<div class="popup">Popup (position + z-index)</div>
デフォルトの重なり順
z-indexを明示的に指定しない場合、要素は次の順序（背面から前面）で重なります。
- ルート要素の背景
- ブロックレベル要素（フロー順）
- フロート要素
- インライン要素
- z-index: autoまたは0の位置指定要素
スタッキングコンテキスト
スタッキングコンテキストとは、共通のz軸を持つ要素のレイヤーです。z-indexの値は、同じスタッキングコンテキスト内でのみ競合します。スタッキングコンテキスト内の要素は、z-indexの値にかかわらず、その外側にある要素より前面に配置できません。
スタッキングコンテキストを作成するもの
次のものによって新しいスタッキングコンテキストが作成されます。
positionとauto以外のz-index- 1未満の
opacity transform、filter、perspectiveの適用- 特定のプロパティに対する
will-change isolation: isolate- z-indexを指定したフレックスまたはグリッドの子要素
スタッキングコンテキストによる分離
isolation: isolateを使用すると、見た目に影響を与えずにスタッキングコンテキストを意図的に作成できます。独自のz-indexレイヤーを内部に収める必要があるUIコンポーネントに便利です。
<div class="modal-wrapper">Isolated stacking context</div>
z-indexスケールの問題
プロジェクトでは、開発者が値を9999や99999まで引き上げて競い合う「z-index戦争」が起こりがちです。CSS変数を使って、名前付きのz-indexスケールを定義すると解決できます。
<p>Custom properties define a z-index scale used across the app.</p>
負のz-index
負のz-index値を指定すると、要素は包含ブロックの背景の背面に配置されます。これは、コンテンツの背後に配置する装飾用疑似要素のレイヤーに利用できます。
<div class="card">Card with a decorative gradient layer behind it</div>
重なりに関する問題のデバッグ
モーダルやツールチップが別の要素の背後に表示される場合、通常は祖先要素に設定された、z-indexの低いスタッキングコンテキストが原因です。DevToolsの3Dビューを使うか、親要素のopacity、transform、filterを確認してください。
フレックスとグリッドでのz-index
フレックスアイテムとグリッドアイテムでは、positionを明示的に設定しなくてもz-indexを直接使用できます。ブラウザーは重なり順を決める際、これらを位置指定された要素として扱います。
<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>
固定モーダルとz-index
モーダルは祖先のスタッキングコンテキストから抜けられるよう、<body>（または最上位のラッパー）の直接の子要素にする必要があります。HTMLの<dialog>要素を使うと、ブラウザーのトップレイヤーでこの処理がネイティブに行われます。
クイックチェック
2つの重なり合う要素が、それぞれ異なる親スタッキングコンテキスト内でz-index: 100を持っています。どちらが前面に表示されるかは何によって決まりますか。
まとめ
z-indexは、位置指定された要素の前後の重なり順を制御します。スタッキングコンテキストは、z-indexの競合範囲を分離します。親要素にスタッキングコンテキストを作成するものがあると、子要素のz-index値がその中に閉じ込められることがあります。isolation: isolateで明示的な境界を作り、CSS変数でz-indexスケールを定義してください。
よくある質問
「Z-indexとスタッキングコンテキスト」レッスンは無料ですか？
はい。「Z-indexとスタッキングコンテキスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Z-indexとスタッキングコンテキスト」で何を学びますか？
z-indexを使って要素の重なり順を制御し、スタッキングコンテキストを理解します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Z-indexとスタッキングコンテキスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- StaticとRelativeによる配置
- Absolute配置とContaining Block
- FixedとStickyによる配置
- Z-indexとスタッキングコンテキスト