【CSS】z-indexが効かない原因と解決方法｜スタッキングコンテキスト完全解説

この記事で学べること

• z-indexの基本的な仕組みとpositionプロパティとの関係
• スタッキングコンテキスト（Stacking Context）の完全理解
• z-indexが効かない7つの原因と具体的な解決方法
• opacity / transform / filter がz-indexに与える影響
• Flexbox / Grid の子要素でのz-indexの挙動
• isolation プロパティによるスコープ制御
• CSSフレームワークとのz-index競合の解決
• position: fixed の特殊な挙動と注意点
• z-index設計のベストプラクティスとレイヤー管理
• モーダル・ドロップダウン・ツールチップの実装パターン
• Chrome DevToolsでのデバッグ方法

/* z-indexの値が大きい要素が手前に表示される */
.back {
  position: relative;
  z-index: 1;   /* 奥に表示 */
}

.front {
  position: relative;
  z-index: 10;  /* 手前に表示 */
}

/* 基本構文 */
z-index: auto;      /* デフォルト値 */
z-index: 0;         /* 整数値 0 */
z-index: 1;         /* 正の整数 */
z-index: 100;       /* 正の整数 */
z-index: -1;        /* 負の整数 */
z-index: inherit;   /* 親要素から継承 */
z-index: initial;   /* 初期値（auto）にリセット */

注意：z-index: autoとz-index: 0は見た目上の重ね順は同じですが、大きな違いがあります。z-index: 0は新しいスタッキングコンテキストを作成しますが、z-index: autoは作成しません。この違いは後述のスタッキングコンテキストの解説で詳しく説明します。

<!-- HTMLの記述順で重なりが決まる -->
<div class="box box-1">BOX 1（奥）</div>
<div class="box box-2">BOX 2（手前）</div>

.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box-1 { background: #3b82f6; top: 20px; left: 20px; }
.box-2 { background: #ef4444; top: 60px; left: 60px; }
/* box-2が後に書かれているため、自然に手前に表示される */

ポイント：z-indexが不要な場面も多いです。HTMLの記述順だけで解決できる場合は、余計なz-indexを追加しないことがベストプラクティスです。

<div class="content">コンテンツ</div>
<div class="overlay">オーバーレイ</div>

.content {
  position: relative;
  z-index: 10;
  background: #fff;
}

.overlay {
  /* positionが指定されていない（デフォルトはstatic） */
  z-index: 9999;  /* ← いくら大きくしても効かない！ */
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.overlay {
  position: relative;  /* ← これを追加するだけ！ */
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.header {
  position: relative;  /* レイアウトに影響なし */
  z-index: 100;        /* z-indexが有効になる */
  /* top, left等は指定しない → 位置は変わらない */
}

.dropdown-menu {
  position: absolute; /* 親を基準に配置 */
  z-index: 200;
  top: 100%;
  left: 0;
}

.nav-item {
  /* position: relative; を忘れている */
  z-index: 100;  /* ← 効かない */
}

/* ✅ 修正 */
.nav-item {
  position: relative;
  z-index: 100;
}

.modal-backdrop {
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  width: 100vw;
  height: 100vh;
  top: 0; left: 0;
  /* ← position: fixed; を忘れている！ */
}

/* ✅ 修正 */
.modal-backdrop {
  position: fixed;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  inset: 0;
}

/* 極端なリセットCSS */
* { position: static; }

/* CSSの詳細度で負けている場合 */
#wrapper .content .overlay {
  position: static;  /* ← 詳細度が高く上書きされる */
}
.overlay {
  position: relative; /* ← 詳細度が低いので効かない */
  z-index: 999;
}

ポイント：z-indexが効かないと思ったら、まずDevToolsでその要素のpositionの計算値を確認しましょう。staticになっていたら、position: relativeを追加するだけで解決します。

スタッキングコンテキストの例え

• フォルダA（z-index: 1）の中にz-index: 9999のページがある
• フォルダB（z-index: 2）の中にz-index: 1のページがある
• フォルダBがフォルダAの上にあるため、フォルダBの全ページがフォルダAの全ページより上
• つまり、フォルダAの9999ページ目よりフォルダBの1ページ目が上にくる

ルート スタッキングコンテキスト（html要素）
┌────────────────────────────────────────────┐
│                                              │
│  ┌──────────────────┐  ┌──────────────────┐ │
│  │ コンテキストA       │  │ コンテキストB       │ │
│  │ (z-index: 1)      │  │ (z-index: 2)      │ │
│  │                   │  │                   │ │
│  │  子A: z-index:   │  │  子B: z-index:   │ │
│  │  9999            │  │  1              │ │
│  │                   │  │                   │ │
│  └──────────────────┘  └──────────────────┘ │
│                                              │
│  結果: 子B(1) が 子A(9999) より手前に表示！     │
│  理由: 親A(1) < 親B(2) だから              │
└────────────────────────────────────────────┘

<div class="parent-a">
  <div class="child-a">z-index: 9999</div>
</div>
<div class="parent-b">
  <div class="child-b">z-index: 1</div>
</div>

.parent-a {
  position: relative;
  z-index: 1;    /* ← スタッキングコンテキスト作成 */
}
.child-a {
  position: absolute;
  z-index: 9999; /* ← parent-aの中でしか比較されない */
  background: #3b82f6;
  padding: 20px;
}

.parent-b {
  position: relative;
  z-index: 2;    /* ← parent-a(1)より大きい */
}
.child-b {
  position: absolute;
  z-index: 1;    /* ← たった1でもchild-aより手前 */
  background: #ef4444;
  padding: 20px;
}

.parent-a {
  position: relative;
  z-index: 3;  /* ← parent-b(2)より大きくする */
}

.parent-a {
  position: relative;
  /* z-indexを指定しない（auto）
     → スタッキングコンテキストが作られない */
}
.parent-b {
  position: relative;
  /* z-indexを指定しない（auto） */
}
/* 両方autoならchild-aとchild-bはルートコンテキストで直接比較
   → child-a(9999) > child-b(1) でchild-aが手前 */

重要：z-index: autoとz-index: 0の違い。見た目の重ね順は同じですが、z-index: 0は新しいスタッキングコンテキストを作成し、z-index: autoは作成しません。これがz-index問題の核心です。

Step 1: 要素Aと要素Bが同じスタッキングコンテキスト内か確認
  → 同じなら z-index の値を直接比較

Step 2: 異なるコンテキストの場合、共通の祖先コンテキストを探す
  → 共通の祖先コンテキスト内で、
     それぞれの親コンテキストのz-indexを比較

Step 3: 親コンテキストのz-indexが大きい方の子孫が手前

重要: 子要素のz-indexがいくら大きくても、
親コンテキストのz-indexを超えることはできない

/* 3階層のスタッキングコンテキスト */
.grandparent {
  position: relative;
  z-index: 1;  /* コンテキスト作成 */
}

.parent {
  position: relative;
  z-index: 10; /* grandparent内でのコンテキスト */
}

.child {
  position: absolute;
  z-index: 9999; /* parent内でのみ有効 */
}

/*
  .childの実効的な重ね順:
  grandparent(1) → parent(10) → child(9999)

  外部の要素と比較するときは
  grandparentのz-index: 1が使われる
*/

<div class="card">
  <div class="tooltip">ツールチップ</div>
  カード内容
</div>
<div class="next-card">次のカード</div>

.card {
  position: relative;
  opacity: 0.95;  /* ← スタッキングコンテキストが作られる！ */
}
.tooltip {
  position: absolute;
  z-index: 9999;  /* ← .cardのコンテキスト内に閉じ込められる */
  bottom: 100%;
  background: #1e293b;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.next-card {
  position: relative;
  z-index: 1;
  /* ← .tooltip(9999)より上に表示されてしまう！ */
}

/* 解決方法1: opacityを削除または1にする */
.card {
  position: relative;
  opacity: 1;
}

/* 解決方法2: 背景色のalpha値で代替する */
.card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  /* opacityではなくbackground-colorのalphaを使う
     → スタッキングコンテキストが作られない */
}

/* 解決方法3: ツールチップをDOM構造で.cardの外に出す */

.sidebar {
  position: relative;
  transform: translateZ(0);  /* GPU高速化のつもりが... */
}
.sidebar .dropdown {
  position: absolute;
  z-index: 1000;
  /* .sidebarのコンテキスト内に閉じ込められる */
}

/* transformを削除する */
.sidebar {
  position: relative;
  /* transformを削除 */
}

/* またはドロップダウンを.sidebarの外に配置 */

/* 全てスタッキングコンテキストを作る */
transform: translateZ(0);
transform: translate3d(0, 0, 0);
transform: scale(1);
transform: rotate(0deg);
transform: translateX(0);

/* スタッキングコンテキストを作らない */
transform: none;  /* ← これだけ作らない */

.image-wrapper {
  position: relative;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  /* ← スタッキングコンテキストが作られる */
}
.image-wrapper .badge {
  position: absolute;
  z-index: 100;
  /* 外の要素より上に来ない可能性 */
}

/* ✅ 解決: filter: drop-shadow()の代わりにbox-shadowを使う */
.image-wrapper {
  position: relative;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  /* box-shadowはスタッキングコンテキストを作らない */
}

/* ❌ 常時指定するとコンテキストが作られっぱなし */
.container {
  will-change: transform;
  /* transform自体は指定していなくてもコンテキストが作られる */
}

/* ✅ 必要な時だけ適用 */
.container {
  will-change: auto;
}
.container:hover {
  will-change: transform;
}

/* スタッキングコンテキストを作る */
contain: paint;     /* ← 作る */
contain: layout;    /* ← 作る */
contain: strict;    /* ← 作る（layout + paint + size） */
contain: content;   /* ← 作る（layout + paint） */

/* スタッキングコンテキストを作らない */
contain: size;      /* ← 作らない */
contain: style;     /* ← 作らない */

opacity / transform / filter 問題の解決早見表

• opacity < 1 → 背景色のalpha値で代替する
• transform: translateZ(0) → 本当に必要か再検討、不要なら削除
• filter: drop-shadow() → box-shadowで代替
• will-change: transform → hover時のみ適用する
• contain: paint → contain: sizeのみにする
• 上記が削除できない場合 → ポップアップ要素をDOM構造で外に出す

<div class="flex-container">
  <div class="item-a">A</div>
  <div class="item-b">B</div>
</div>

.flex-container {
  display: flex;
}
.item-a {
  /* positionを指定していない！ */
  z-index: 2;  /* ← それでも効く */
  background: #3b82f6;
  margin-right: -20px; /* 重なりを作る */
}
.item-b {
  z-index: 1;
  background: #ef4444;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid-item-1 {
  grid-column: 1 / 3;  /* 両方の列にまたがる */
  grid-row: 1;
  z-index: 1;  /* positionなしでOK */
}
.grid-item-2 {
  grid-column: 1 / 2;
  grid-row: 1;  /* item-1と重なる */
  z-index: 2;  /* 手前に表示 */
}

.flex-container { display: flex; }

.card {
  z-index: 1;  /* ← コンテキストが作られる */
}
.card .dropdown {
  position: absolute;
  z-index: 9999;
  /* 隣の.cardの上に表示されない可能性 */
}

.flex-container { display: flex; }

.card {
  position: relative;
  /* z-indexを指定しない */
}
/* ドロップダウン表示時のみz-indexを上げる */
.card:hover,
.card.is-open {
  z-index: 10;
}
.card .dropdown {
  position: absolute;
  z-index: 100;
}

ポイント：Flexbox/Gridの子要素ではpositionなしでもz-indexが効きますが、同時にスタッキングコンテキストが作られます。不要なz-indexは指定しないのがベストです。

.component {
  isolation: isolate;
  /*
    これだけで新しいスタッキングコンテキストが作られる
    - positionの変更不要
    - z-indexの指定不要
    - レイアウトへの影響なし
  */
}

/* コンポーネント内のz-indexは外に漏れない */
.component .inner-element {
  position: relative;
  z-index: 9999;
  /* ← .componentのコンテキスト内に閉じ込められる */
}

<!-- カードコンポーネント -->
<div class="card">
  <div class="card-image" style="position:relative; z-index:1"></div>
  <div class="card-badge" style="position:relative; z-index:2"></div>
</div>

<!-- card-badgeのz-index:2が外部の要素にも影響してしまう -->

.card {
  isolation: isolate;
  /*
    カード内のz-indexはカード外に影響しない
    他のコンポーネントとのz-index競合を防げる
  */
}

/* コンポーネントのルート要素に適用 */
.header { isolation: isolate; }
.sidebar { isolation: isolate; }
.main-content { isolation: isolate; }
.footer { isolation: isolate; }

/*
  各コンポーネント内のz-indexは
  そのコンポーネント内でのみ有効
  → z-indexの競合が起きにくい
*/

ポイント：isolation: isolateは「z-indexのスコープを作る」最もクリーンな方法です。コンポーネント設計時に積極的に活用しましょう。ただし、コンポーネント内のポップアップが外に出られなくなる点には注意が必要です。

/* Tailwind CSS デフォルトのz-indexユーティリティ */
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-auto { z-index: auto; }

/* カスタム値も使える */
/* <div class="z-[100]"> → z-index: 100 */

/* 開発者A: ヘッダーを最前面に */
.header { z-index: 100; }

/* 開発者B: モーダルをヘッダーより上に */
.modal { z-index: 999; }

/* 開発者C: ツールチップをモーダルより上に */
.tooltip { z-index: 9999; }

/* 開発者D: 緊急通知を最前面に */
.emergency-banner { z-index: 99999; }

/* 開発者E: デバッグパネルをさらに上に... */
.debug-panel { z-index: 999999; }

/* ↑ このインフレは終わりがない... */

注意：z-index: 99999 のような巨大な値が必要になった時点で、設計を見直すべきサインです。後述のベストプラクティスでレイヤー設計の方法を解説します。

.sidebar {
  position: relative;
  z-index: 1;  /* コンテキスト作成 */
}

.sidebar .fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  /* ← .sidebar(z-index:1)のコンテキスト内
     外部のz-index:2以上の要素に負ける */
}

.main-content {
  position: relative;
  z-index: 2;
  /* ← .fixed-buttonより手前に表示される */
}

.animated-section {
  transform: translateY(0);
  /* または will-change: transform; でも同様 */
}

.animated-section .fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*
    期待: ビューポート上端に固定
    実際: .animated-sectionを基準に配置される！
    スクロールしてもビューポートに固定されない
  */
}

/* 解決方法1: fixed要素をtransformを持つ親の外に移動 */
<body>
  <div class="fixed-header">...</div>  <!-- transformの外に配置 -->
  <div class="animated-section">...</div>
</body>

/* 解決方法2: 親のtransformを削除できる場合は削除 */
.animated-section {
  transform: none;
}

/* fixed要素同士はz-indexで直接比較 */
.fixed-header {
  position: fixed;
  top: 0;
  z-index: 100;   /* ヘッダー */
}

.fixed-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;   /* モーダル背景（ヘッダーより手前） */
}

.fixed-modal {
  position: fixed;
  z-index: 300;   /* モーダル本体（背景より手前） */
}

.fixed-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 400;   /* トースト通知（最前面） */
}

ポイント：position: fixedを使う場合は、祖先要素にtransform、filter、perspectiveが設定されていないか確認しましょう。これらが設定されていると、fixedの挙動が完全に変わります。

:root {
  /* z-index レイヤー定義 */
  --z-below: -1;        /* 背景の装飾 */
  --z-default: 0;       /* 通常レベル */
  --z-raised: 1;        /* 少し手前 */
  --z-dropdown: 10;     /* ドロップダウン */
  --z-sticky: 20;       /* スティッキーヘッダー */
  --z-overlay: 30;      /* オーバーレイ背景 */
  --z-modal: 40;        /* モーダル */
  --z-popover: 50;      /* ポップオーバー */
  --z-tooltip: 60;      /* ツールチップ */
  --z-toast: 70;        /* トースト通知 */
  --z-max: 100;         /* 最大値（緊急時のみ） */
}

/* 使用例 */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.dropdown-menu {
  z-index: var(--z-dropdown);
}
.modal-backdrop {
  z-index: var(--z-overlay);
}
.modal {
  z-index: var(--z-modal);
}

/* コンポーネントのルートでisolationを使う */
.card-component {
  isolation: isolate;
  /* コンポーネント内のz-indexは外に漏れない */
}

/* コンポーネント内では自由にz-indexを使える */
.card-component .image { z-index: 1; }
.card-component .badge { z-index: 2; }
.card-component .overlay { z-index: 3; }

z-index コードレビューチェックリスト

• ☐ CSS変数（--z-xxx）を使っているか？ マジックナンバーになっていないか？
• ☐ positionが適切に指定されているか？
• ☐ 親要素のスタッキングコンテキストを確認したか？
• ☐ z-indexの値は最小限か？（9999のような値は使っていないか？）
• ☐ isolation: isolateでスコープを区切れないか？
• ☐ 他のコンポーネントのz-indexと競合しないか？
• ☐ opacity、transform、filterがスタッキングコンテキストを作っていないか？
• ☐ モバイル表示でもz-indexが正しく動作するか？

<!-- ページのコンテンツ -->
<main class="page-content">...</main>

<!-- モーダル（body直下に配置するのがベスト） -->
<div class="modal-backdrop" id="modalBackdrop"></div>
<div class="modal" id="modal">
  <div class="modal-content">
    <h2>モーダルタイトル</h2>
    <p>モーダルの内容...</p>
    <button class="modal-close">閉じる</button>
  </div>
</div>

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay, 30);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal, 40);
  background: #fff;
  border-radius: 12px;
  padding: 2em;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

ポイント：モーダルはbody直下に配置するのがベストです。深いDOM構造の中に配置すると、祖先要素のスタッキングコンテキストに閉じ込められるリスクがあります。ReactではPortal、VueではTeleportを使いましょう。

/* HTML */
<nav class="nav">
  <div class="nav-item">
    <button class="nav-link">メニュー</button>
    <div class="dropdown">
      <a href="#">サブメニュー1</a>
      <a href="#">サブメニュー2</a>
    </div>
  </div>
</nav>

.nav {
  position: relative;
  z-index: var(--z-sticky, 20);
}
.nav-item {
  position: relative;
  /* z-indexを指定しない → コンテキストを作らない */
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: var(--z-dropdown, 10);
  display: none;
}
.nav-item:hover .dropdown {
  display: block;
}

.tooltip-trigger {
  position: relative;
  cursor: help;
}

.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  z-index: var(--z-tooltip, 60);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip-trigger:hover::after {
  opacity: 1;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 20);
  background: #fff;
  /*
    重要: position: sticky 自体が
    スタッキングコンテキストを作る
    ドロップダウンはこのコンテキスト内
  */
}

.main-content {
  position: relative;
  /* z-indexを指定しない（auto）
     → ヘッダー(z-index:20)より奥になる */
}

/* HTML */
<div class="overlap-grid">
  <img class="img-back" src="back.jpg" alt="">
  <img class="img-front" src="front.jpg" alt="">
</div>

.overlap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 600px;
}
.img-back {
  grid-column: 1 / 2;
  grid-row: 1;
  width: 100%;
  z-index: 1;
}
.img-front {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 80%;
  margin-top: 40px;
  margin-left: 30%;
  z-index: 2;  /* Grid子要素なのでposition不要 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

3D Viewの使い方

• DevToolsを開く（F12 または Ctrl+Shift+I）
• 右上の「⋮」メニュー → More tools → Layers を選択
• または Command Palette（Ctrl+Shift+P）で「Show Layers」と入力
• 3Dビューでドラッグして回転させ、レイヤーの重なりを確認
• 各レイヤーをクリックすると、そのレイヤーの詳細情報が表示される

Computedタブでの確認手順

• 対象の要素を右クリック →「検証」を選択
• Elements パネルで要素が選択された状態で、右側の「Computed」タブを選択
• フィルターに「z-index」と入力
• z-indexの計算値が表示される（autoの場合はautoと表示）
• 同様に「position」もチェックして、staticになっていないか確認

スタッキングコンテキストの特定手順

• Step 1: 問題の要素をDevToolsで選択
• Step 2: DOMツリーを上に辿りながら、各祖先要素のComputedスタイルを確認
• Step 3: 以下のプロパティが設定されている祖先を探す
  • z-indexがauto以外（かつpositionがstatic以外）
  • opacityが1未満
  • transformがnone以外
  • filterがnone以外
  • isolation: isolate
  • position: fixed または sticky
• Step 4: 最も近い上記の祖先が、その要素が属するスタッキングコンテキスト

// DevTools Consoleで実行するヘルパー関数
function findStackingContext(element) {
  let el = element;
  while (el && el !== document.documentElement) {
    const style = window.getComputedStyle(el);
    const isContext =
      style.position === 'fixed' ||
      style.position === 'sticky' ||
      (style.zIndex !== 'auto' &&
       style.position !== 'static') ||
      parseFloat(style.opacity) < 1 ||
      style.transform !== 'none' ||
      style.filter !== 'none' ||
      style.isolation === 'isolate';

    if (isContext) {
      console.log('スタッキングコンテキスト:', el);
      console.log('  position:', style.position);
      console.log('  z-index:', style.zIndex);
      console.log('  opacity:', style.opacity);
      console.log('  transform:', style.transform);
      return el;
    }
    el = el.parentElement;
  }
  console.log('ルートスタッキングコンテキスト（html）');
  return document.documentElement;
}

// 使い方: 要素を選択してConsoleで実行
findStackingContext($0);  // $0は選択中の要素

ポイント：上記のJavaScript関数をDevToolsのConsoleに貼り付けて使うと、選択した要素が属するスタッキングコンテキストを簡単に特定できます。z-indexのデバッグ時に非常に便利です。

/* ============================================
   z-index レイヤー設計テンプレート
   プロジェクトの :root に追加して使う
   ============================================ */
:root {
  /* Layer 0: 背景装飾 */
  --z-below: -1;

  /* Layer 1: 通常コンテンツ */
  --z-base: 0;
  --z-raised: 1;

  /* Layer 2: ナビゲーション */
  --z-dropdown: 10;
  --z-sticky: 20;

  /* Layer 3: オーバーレイ */
  --z-overlay: 30;
  --z-modal: 40;

  /* Layer 4: ポップオーバー */
  --z-popover: 50;
  --z-tooltip: 60;

  /* Layer 5: 通知 */
  --z-toast: 70;

  /* Layer MAX: 緊急時のみ */
  --z-max: 100;
}

z-indexトラブルシューティング 3ステップ

• Step 1: DevToolsでpositionとz-indexの計算値を確認する
• Step 2: 祖先要素をたどり、スタッキングコンテキストを作っている要素を特定する
• Step 3: コンテキストの原因（opacity, transform, z-index等）を特定し、適切な解決方法を選ぶ