z-indexで要素の重なり順をマスター

このページの目的

ドロップダウンメニューが他の要素の下に隠れてしまう、モーダルウィンドウの背景がコンテンツより手前に来てしまう、といった「要素の重なり順」に関する問題を解決する、z-indexプロパティの使い方をマスターします。

layersz-indexとは？

z-indexは、要素の重なり順を「Z軸（手前と奥）」の方向で制御するためのプロパティです。通常、HTMLは後に書かれた要素ほど手前（上）に表示されますが、z-indexを使うことで、この順番を自由に変更できます。

ポイント：z-indexは、positionプロパティの値がstatic（初期値）以外の要素（例: relative, absolute, fixed, sticky）にしか適用されません。

---

build実装方法

基本的な使い方

z-indexには数値を指定し、**数値が大きいほど手前（上）**に表示されます。

<!-- HTML -->
<div class="container">
  <div class="box box-1">Box 1 (z-index: 10)</div>
  <div class="box box-2">Box 2 (z-index: 20)</div>
  <div class="box box-3">Box 3 (z-index: 5)</div>
</div>

<!-- CSS -->
.box {
  position: absolute; /* z-indexを効かせるため */
  width: 150px;
  height: 150px;
}
.box-1 {
  background: #E57373;
  z-index: 10;
  top: 20px; left: 20px;
}
.box-2 {
  background: #81C784;
  z-index: 20; /* 最も大きいので、一番手前に表示される */
  top: 40px; left: 40px;
}
.box-3 {
  background: #64B5F6;
  z-index: 5;
  top: 60px; left: 60px;
}

---

warningよくある間違いと対策

z-indexが効かない

最も多い原因は、対象の要素のpositionがstatic（初期値）のままであることです。position: relative;などを指定してあげましょう。

z-index: 9999;のように、大きな数値を使いすぎてしまう

親要素が違うと、z-indexの効力範囲も変わります（スタッキングコンテキスト）。むやみに大きな数値を使うのではなく、HTMLの構造を見直し、必要な箇所にだけ1, 10, 100のように、段階的に指定するのが良い管理方法です。

親要素のz-indexに負けている

ある要素のz-indexは、その親要素のz-indexを超えることはできません。重なり順がおかしい時は、親要素のz-indexやpositionの設定も確認しましょう。

---

---