Type & Rhythm
Tooltip · z-index: 999
LAYER DEBUG TOOL
Z-Index Inspector
9999でも前へ出ない理由を、親の階層から見つける。
NO LIBRARY
LIVE STACKING INSPECTOR
重なり順を、親子関係で見る
4CONTEXTS
1TRAPPED
INDEPENDENT DIGITAL STUDIO · 2026
Ideas need
the right layer.
Space & Signal
Quick actionsDuplicateShare link
CHATAsk us anything
PROJECT 09Selected work
Selected work
is now open.
z-index: 9999でも、親の階層を超えることはできません。
VIEW CASE →装飾をコンポーネント内へ安全に閉じ込める使い方。
要素をクリックすると、そのStacking Contextを選択できます。
INSPECT ANY PAGE
実際のサイトでも階層を見る
実ページのStacking Contextを検出し、Rootまでの経路を一覧と3Dで確認します。
このボタンをブックマークバーへドラッグ対象サイトでクリック。もう一度押すと解除します。
⌖ Context Inspector
- 01ブックマークバーへ登録
紫のボタンをそのままドラッグします。
- 02調べたい要素を選択
Contextを紫枠、選択中を赤枠で表示します。
- 033D PATHで親を確認
ドラッグで回転し、Rootまでの経路と生成理由を確認します。
ドラッグできない場合
URLをコピーして、新規ブックマークのURL欄へ貼り付けます。
対象範囲はページ本体のDOMです。別オリジンのiframe、Shadow DOM内、疑似要素は直接検査しません。
CONTEXT TRIGGERS
何が新しい階層を作るのか
filter / backdrop-filter視覚効果のレイヤーcontain: paint描画範囲を閉じ込めるContext自体は不具合ではありません。必要な隔離か、意図しない隔離かを見分けることが重要です。
DIAGNOSTIC CODE
判定ロジックを持ち帰る
Computed Styleを使って判定します。描画順の最終結果は、親Context内での順序とDOM順も合わせて確認してください。