CSS z-indexが効かない原因と解決法｜重なり順トラブルを初心者向けに解説

Webデザインをしていると、よくあるトラブルのひとつが「z-indexが効かない」「重なり順が思った通りにならない」という問題です。

モーダルウィンドウやドロップダウンメニュー、ヘッダーなどで要素が背景に隠れてしまうことは珍しくありません。

この記事では、z-indexが効かない原因を整理し、具体的な解決策と実践例を交えて解説します。
初心者でも理解しやすいよう、図解やコード例も掲載しています。

そもそもz-indexとは？

CSSのz-indexは、要素の重なり順（スタッキング順）を指定するプロパティです。
数字が大きいほど手前に表示され、数字が小さいと奥に表示されます。

See the Pen Untitled by suguru (@suguru22) on CodePen.

上記の場合、Box 2がBox 1の手前に表示されます。

z-indexはpositionがrelative, absolute, fixed, stickyの要素にのみ適用されます。

.box {
  z-index: 10;
  /* positionが指定されていないと効かない */
}

✅ 解決法：positionを明示的に指定する

.box {
  position: relative; /* これでz-indexが有効になる */
  z-index: 10;
}

CSSで要素の重なり順を制御する 「仮想的な箱（コンテナ）」 のようなものと考えると分かりやすいです。

親要素A（z-index: 1）
 ├─ 子要素B（z-index: 10）
 └─ 子要素C（z-index: 5）

親要素D（z-index: 2）
 └─ 子要素E（z-index: 1）

つまり、子要素の z-index は 親のスタッキングコンテキストの範囲内でしか効かない ということです。

それらを踏まえ、z-indexは親要素のスタッキングコンテキスト内でのみ有効（*再掲）です。
親要素にpositionとz-indexが設定されていると、子要素はその範囲内での重なり順しか変えられません。

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 999; /* 親のz-indexを超えても、親コンテキスト内でしか影響しない */
}

✅ 解決法：必要に応じて親のz-indexやpositionを調整する

これらのプロパティが設定されると、新しいスタッキングコンテキストが作られ、子要素のz-indexが親の外には影響しません。

✅ 解決法：不要なtransformやopacityを見直す、または親のz-indexを調整する

floatやflexboxの中でz-indexを使う場合、親の配置や重なり順が影響することがあります。
特にflexアイテムの重なり順はDOMの順序も関係します。

✅ 解決法：必要に応じてposition: relativeを追加し、z-indexを明示的に指定する

✅ 解決法：DOM階層を整理し、明確にpositionとz-indexを設定する

See the Pen Untitled by suguru (@suguru22) on CodePen.

原因	解決法
position未指定	relative, absolute, fixed, stickyを設定
親要素のz-index（stacking context）	親のz-indexを調整、スタッキングコンテキストを理解
opacity・transformなどで新しいコンテキスト	不要なプロパティを削除 or 親要素調整
float・flexでの重なり順	positionを明示、DOM順序を整理
ブラウザや競合	DOM階層を整理、明確にposition・z-indexを設定

z-indexは単なる数字の大小だけではなく、親子関係・スタッキングコンテキスト・positionを理解することが重要です。
これを押さえれば、モーダル・ドロップダウン・重なり要素も思い通りに表示できます。