Z-Index インスペクターは、ウェブページ上のすべての要素の完全な重なり順を明らかにします。z-index 値を持つすべての要素はページ上で直接ハイライト表示・ラベル付けされ、ソートされたレイヤーマップパネルがすべての z-index レイヤーを下から上に表示します。position、transform、opacity、その他の CSS プロパティによって生成される stacking context を識別し、z-index のデバッグを視覚的かつ直感的にします。
z-index のバグは CSS において最も厄介な問題の一つです。すべての要素の上に表示されるはずのモーダルがサイドバーの後ろに隠れている。ドロップダウンメニューが次のセクションの後ろに消えてしまう。親要素が予期しない stacking context を生成しているためにツールチップが見えない。根本原因はほぼ常に stacking context の仕組みに対する誤解であり、ブラウザの DevTools はその可視化においてほとんど助けになりません。Z-Index インスペクターは見えないものを見えるようにします。明示的な z-index を持つすべての要素に色付きオーバーレイとその値を示すラベルが付与されます。ソートされたレイヤーマップパネルはすべての z-index 値を下（最小値）から上（最大値）の順に並べ、それぞれの値がどの CSS クラスや要素に属するかを示します。最も重要なのは、このツールが stacking context の境界を識別する点です。position + z-index、transform、opacity < 1、filter、will-change、または isolation によって新しい stacking context を生成する要素が対象です。どの祖先が stacking context を生成しているかを理解することが、z-index バグを修正する鍵となります。
z-index 値を持つすべての要素に半透明の色付きオーバーレイと z-index 番号を示すラベルバッジが付与されます。高い z-index 値は暖色系（赤）、低い値は寒色系（青）で表示されます。視覚的なレイヤー表現により、重なり順が一目でわかります。
サイドパネルにページ上で見つかったすべての z-index 値が最高値（上）から最低値（下）の順で一覧表示されます。各エントリには z-index 値、CSS セレクターまたはクラス名、および position プロパティが表示されます。任意のエントリをクリックすると、ページ上の対応する要素がハイライト表示されます。
ページ上のすべての stacking context 境界と、それを生成する CSS プロパティを識別します。対象は position: relative/absolute + z-index、transform、opacity < 1、filter、will-change、isolation: isolate、または contain: layout です。これらは個別に一覧表示されるため、z-index 値が期待通りに動作しない原因を追跡できます。
パネル内の任意のレイヤーをクリックすると、ページ上の対応する要素がハイライト表示されスクロールします。またはページ上のハイライトされた要素をクリックすると、レイヤーマップパネル内でその位置が示されます。自然な方向でどちらからでも重なり順をナビゲートできます。
各レイヤーエントリには要素の CSS position 値（static、relative、absolute、fixed、sticky）が表示されます。z-index は positioned 要素にのみ適用されるためです。z-index が設定されているにもかかわらず position が static の場合（z-index が効かない一般的なバグ）を素早く発見できます。
選択した要素について、ルートまでの祖先 stacking context の完全なチェーンを確認できます。どの祖先の stacking context が要素の z-index スコープを制限しているかを正確に把握できます。これが z-index デバッグの大半における重要なインサイトです。
z-index: 9999 のモーダルが z-index: 10 のサイドバーの後ろに隠れています。なぜでしょうか？Z-Index インスペクターは、モーダルの親が position: relative を持ち z-index: 1 で stacking context を生成している一方、サイドバーの親が z-index: 2 を持つことを示します。モーダルは親の context から抜け出せないのです。
ドロップダウンメニューが開いたときに次のセクションの後ろに消えてしまいます。インスペクターは、メニューのコンテナが overflow: hidden（これも stacking context を生成します）を持つか、次のセクションがより高い z-index を持つことを明らかにします。視覚的なレイヤーハイライトにより重なりが一目でわかります。
時間の経過とともに z-index 値が蓄積されます：10、100、999、9999、99999。レイヤーマップはすべての値をソートして表示するため、実際に必要な範囲を特定し、すっきりした体系（1、2、3、10、100）に簡略化しやすくなります。
チャットウィジェット、クッキーバナー、アナリティクスオーバーレイは高い z-index 値を持つ要素を挿入します。Z-Index インスペクターはそれらが使用している値を正確に示し、競合を避けるために自分の z-index 値を適切に設定する助けになります。
ページ上のすべての stacking context を見直して、不要なものを確認します。視覚効果のために適用された transform、filter、opacity が意図せず stacking context を生成し、他の場所で z-index の問題を引き起こすことがあります。context リストによってすべてを可視化できます。
DevSuite Pro のフローティングドックを開き、Z-Index インスペクターのアイコンをクリックします。ツールがページをスキャンし、z-index 値を持つすべての要素とすべての stacking context 境界を識別します。
z-index 値を持つ要素にページ上で直接色付きオーバーレイが付与され、z-index 番号を示すラベルが表示されます。高い値は暖色、低い値は寒色で表示されます。
サイドパネルを開いてすべての z-index レイヤーを最高値から最低値の順に確認します。各エントリには値、セレクター、position プロパティが表示されます。任意のエントリをクリックするとページ上の要素がハイライト表示されます。
パネルの「Stacking Contexts」セクションに、新しい stacking context を生成するすべての要素とその原因となる CSS プロパティが一覧表示されます。これが z-index の問題を理解する鍵となります。
任意の要素をクリックすると、その祖先 stacking context チェーンが表示されます。どの親 context がレンダリング順に影響しているかを確認できます。チェーンを上に辿って、重なりの問題を引き起こしている context 境界を特定します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
