CSSのz-indexとは？重なり順の仕組みと使い方を解説

PR CSS

CSSのz-indexとは？重なり順の仕組みと使い方を解説

💡 この記事でわかること

  • z-indexとは何か、何を制御するプロパティか
  • z-indexを使うために必要な条件(positionとの関係)
  • 重なり順が決まる基本ルール
  • 「z-indexを指定したのに効かない」原因と対処法
  • モーダルやメニューなど実践的な使用例

🧮 z-indexとは?

z-indexは、
👉 要素が重なったときの「上下の順番(重なり順)」を指定するCSSプロパティです。

画面をXY軸(横・縦)だけでなく、
手前・奥というZ軸で考えたときの「奥行き」を数値で指定するイメージです。

.box {
  z-index: 10;
}

数値が大きいほど手前(上)に表示されます。
指定できる値は整数(正の数・負の数どちらもOK)です。

⚠️ z-indexを使うための条件

実は、z-indexはどんな要素にも効くわけではありません。

👉 positionプロパティがstatic(初期値)以外(relative・absolute・fixed・sticky)に設定されている要素にしか効きません。

.box {
  position: relative; /* これがないとz-indexは無視される */
  z-index: 10;
}

「z-indexを指定したのに何も変わらない」というときは、
まずpositionが指定されているか確認してみましょう。

👉 positionについての記事はこちら

📐 重なり順が決まる基本ルール

z-indexを指定しない場合、重なり順は次のルールで決まります。

  • 通常のHTML要素(position: static) → 一番奥
  • positionが指定された要素 → 通常要素より手前
  • 同じ条件同士なら、HTMLで後に書かれた要素ほど手前に表示される

z-indexを指定すると、この順番を数値で上書きできます。
実際にコードで確認してみましょう。

<div class="box red">A</div>
<div class="box blue">B</div>

.box {
  position: absolute;
  width: 150px;
  height: 150px;
}

.red {
  background: red;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.blue {
  background: blue;
  top: 60px;
  left: 60px;
  z-index: 2; /* こちらの方が数値が大きいので手前に表示される */
}

この例では、z-index: 2の青いボックスが、z-index: 1の赤いボックスより手前に表示されます。

🚨 つまずきやすいポイント:親のスタッキングコンテキスト

positionも指定してz-indexも大きい数値にしたのに、
他の要素の下に隠れてしまう…ということがあります。

原因の多くは「スタッキングコンテキスト」と呼ばれる仕組みです。

positionやopacity、transformなどを指定した要素は、
👉 その内部だけで完結した「新しい重なりのグループ(スタッキングコンテキスト)」を作ります。

.parent {
  position: relative;
  z-index: 1; /* 親のスタッキングコンテキストがここで確定 */
}

.child {
  position: absolute;
  z-index: 9999; /* 親の中では最前面だが… */
}

.other {
  position: relative;
  z-index: 2; /* 親(z-index:1)より大きいので、childより手前に出る */
}

👉 子要素のz-indexは、あくまで「親のスタッキングコンテキストの中」でしか比較されません。親自体の順番が低ければ、子がどれだけ大きい数値でも、他のグループより手前には出られないのです。

💡 モーダルやドロップダウンなど「常に最前面に出したい」要素は、
親のスタッキングコンテキストに巻き込まれないよう、body直下に配置するなどの工夫がされることがあります。

🛠️ 実践例:モーダルの重ね順

実務でよくある例が、モーダル(ポップアップ)の重ね順です。

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100; /* ページの他の要素より手前 */
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101; /* オーバーレイよりさらに手前 */
}

ヘッダー・フッター・オーバーレイ・モーダルなど、
重なりが発生する要素をあらかじめ整理し、数値のルール(例:ヘッダーは10、モーダルは100など)を決めておくと管理しやすくなります。

✨ まとめ

z-indexは、
👉 要素の重なり順を数値で指定するプロパティです。

  • positionがstatic以外でないと効かない
  • 数値が大きいほど手前に表示される
  • 子要素のz-indexは「親のスタッキングコンテキスト内」でしか比較されない
  • モーダルなど重なりが多いUIでは、数値のルールを決めておくと安全

「z-indexが効かない」と感じたときは、
まずpositionの指定と、親要素のスタッキングコンテキストの2点を疑ってみてください。

-CSS
-, , ,