← カテゴリ一覧に戻る

重なり順（z-index）

z-indexisolationstacking context

z-indexは要素の重なり順（Z軸方向の順序）を制御するプロパティです。値が大きいほど手前に表示されます。ただしスタッキングコンテキストという概念を理解しないと、z-indexが「効かない」という問題に直面します。

デモ：z-index の基本（値が大きいほど手前）

z-index: 1
z-index: 2
z-index: 3（最前面）

z-index が効く条件

⚠️ z-index は position が static 以外の要素にしか効きません

❌ 効かない（staticのまま）

z-index を設定しても position: static では無効

✅ 効く（positionedな要素）

position: relative/absolute/fixed/sticky のいずれかが必要

スタッキングコンテキスト（重なり文脈）の理解

よくある「z-indexが効かない」問題の原因

z-index は 同じスタッキングコンテキスト内 でのみ比較されます。異なるスタッキングコンテキスト間では、親のz-indexで優劣が決まります。

同じコンテキスト内：z-index が効く

z: 1
z: 2 ✅前面

異なるコンテキスト：親のz-indexが優先

親A z:1
子 z:9999
親B z:2 前面
子 z:1

左の子（z:9999）より右の子（z:1）が前面 → 親のz-indexが支配

スタッキングコンテキストが作られる条件

position + z-index（auto以外）
opacity < 1
transform（none以外）
filter（none以外）
will-change
isolation: isolate
mix-blend-mode
contain: layout/paint

比較：同一 vs 異なるスタッキングコンテキスト

ケース同一コンテキスト異なるコンテキスト
z-index の比較直接比較される親のz-indexで決まる
よくある問題—「z-index: 9999 にしても隠れる」
解決法—コンテキストを壊す or 同じ階層に移動
デバッグ方法z-indexの数値を確認DevToolsで親要素のプロパティを確認

NEWisolation: isolate — 副作用なしにスタッキングコンテキストを作成

従来、スタッキングコンテキストを作るには position + z-index や opacity などの副作用を持つプロパティが必要でした。isolation: isolate は副作用なしに新しいスタッキングコンテキストを作成できます。

isolation: isolate の使いどころ

  • コンポーネントのz-indexを他から隔離
  • mix-blend-mode を特定要素に限定
  • 副作用（透明度・変形など）なしで重なりを制御
/* isolation: isolate の使用例 */
.component {
  /* このコンポーネント内のz-indexを外部から隔離 */
  isolation: isolate;
}

/* コンポーネント内では自由にz-indexを使える */
.component .modal { z-index: 100; }
.component .tooltip { z-index: 200; }
/* 外側のz-index競合の影響を受けない */

/* mix-blend-modeを特定範囲に限定 */
.card {
  isolation: isolate; /* カード内でのblendingを隔離 */
}
.card .overlay {
  mix-blend-mode: multiply; /* カード外には影響しない */
}

コード例

/* z-index の基本（positionedな要素に設定） */
.element {
  position: relative; /* または absolute / fixed / sticky */
  z-index: 10;
}

/* 一般的なz-indexの慣習 */
:root {
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* isolation でコンポーネントのコンテキストを隔離 */
.card {
  isolation: isolate;
}

/* スタッキングコンテキストが作られる例 */
.will-create-context {
  position: relative;
  z-index: 1;        /* z-indexがauto以外 → コンテキスト作成 */
}
.also-creates-context {
  opacity: 0.99;     /* 1未満 → コンテキスト作成 */
  transform: translateZ(0); /* none以外 → コンテキスト作成 */
}

z-index のデバッグ Tips

  • Chrome DevTools の「3D View」（Layers パネル）でスタッキングコンテキストを視覚的に確認できます
  • z-indexを大きくしても効かない場合、祖先要素の transform・opacity・filter を疑いましょう
  • モーダルやドロップダウンは <body> 直下に置くか、<dialog> 要素（最上位レイヤーに自動配置）の使用を検討
  • z-indexは整数のみ有効（小数点は切り捨て、負の値も使用可）

🤖 AIプロンプトテンプレート

CSSのz-indexとスタッキングコンテキストを使った重なり順制御の実装例をReact + Tailwind CSSで作成してください。

要件:
- z-indexの値の大小による重なり順の基本デモ（positionedな要素同士の比較）
- スタッキングコンテキストが異なると子のz-index: 9999でも親のz-indexに支配される問題の視覚的デモ
- スタッキングコンテキストを作成する条件一覧（opacity / transform / filter / isolation等）の説明
- isolation: isolateを使ってコンポーネントのz-indexを外部から隔離するパターン
- 実際のUIコンポーネント（モーダル / ドロップダウン / ツールチップ）のz-index設計例
- CSS変数を使ったz-indexの一元管理パターン（--z-dropdown: 100 等）

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo