Z-index Stacking Visualizer
レイヤーを追加して描画順に並べ替え、重ね合わせコンテキストの条件も確認。
描画順（奥から手前）
重なりのプレビュー
プレビューではすべてのレイヤーを絶対配置にして、static のレイヤーも描画順を確認できるようにしています。
新しい重ね合わせコンテキストが作られる条件
- position が static 以外で、z-index が auto 以外の要素。
- opacity が 1 未満の要素。
- transform・filter・backdrop-filter・perspective が none 以外の要素。
- isolation: isolate、mix-blend-mode が normal 以外、または will-change で該当プロパティを指定した要素。
- z-index が auto 以外のフレックス・グリッドアイテム、および文書のルート要素。
使い方
- レイヤーに名前を付け、z-index を設定して position の値を選びます。
- 必要なら不透明度を下げ、transform にチェックを入れ、独自の重ね合わせコンテキストを持つか指定します。
- 「レイヤーを追加」を押すと、ブラウザの描画順に一覧が並べ替わります。
- 重なり合うプレビューを確認します。破線の枠は重ね合わせコンテキストを作るレイヤーです。
- 個別に削除したり全消去して組み直したりしながら、実際の不具合を検証できます。
よくある用途
- 表示されないオーバーレイの調査 — static のレイヤーが z-index に反応しないことを即座に確認できます。
- モーダルの階層設計 — 基本コンテンツ、固定ヘッダー、ダイアログを 1 つの順序付き一覧に並べます。
- 重ね合わせルールの学習 — position: static では z-index が完全に無効であることを示せます。
- 副作用の確認 — opacity が 1 未満のレイヤーが重ね合わせコンテキストになる様子を確認します。
よくある質問
Q: static のレイヤーが z-index: 0 の配置済みレイヤーより下になるのはなぜですか？ A: CSS の描画アルゴリズムでは、通常フローの非配置要素を先に描き、その後に z-index が auto または 0 の配置済み子孫を描きます。static 要素に z-index を指定しても効果がないため、オーバーレイが表示されない最も多い原因になります。
Q: z-index が小さければ必ず奥になりますか？ A: 同じ重ね合わせコンテキスト内でのみ成り立ちます。異なるコンテキストにある要素は親同士で比較されるため、z-index が 999 の子要素でも、親の兄弟要素の z-index 2 より奥になることがあります。
Q: 「重ね合わせコンテキストを作る」のチェックは何を変えますか？ A: そのレイヤーが子孫を閉じ込める印になります。子孫はコンテキストの外の要素と比較できなくなります。可視化では破線で境界を示し、並べ替えながら範囲を確認できます。
データはこのデバイス内にとどまります
Z-index Stacking Visualizer は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。