z-index
中級読み方：ゼットインデックス｜英語：Z Index
要素の重なり順を指定するプロパティで、数値が大きいほど手前に表示されるよ。positionが必要。いつ使う？ モーダル（ポップアップ）を他の要素より手前に表示したい、ドロップダウンメニューが他の要素に隠れないようにしたいときに使うよ。間違いやすいポイント: z-indexはposition: static（デフォルト）の要素には効かないよ。必ずposition: relative; などを一緒に指定しよう。また、z-index: 9999 のような大きな値を乱用すると管理が大変になるよ。
やさしい説明
z-indexは、要素の重なり順を指定するプロパティです。数値が大きいほど手前に表示されます。
机の上に紙を重ねるイメージです。一番上の紙が一番手前に見えますよね。z-indexの数値が大きい要素が「一番上の紙」になります。
注意点として、z-indexは position: static（デフォルト）以外の要素にしか効きません。relative、absolute、fixed、sticky のいずれかが必要です。
図解：z-indexの重なり
具体例・使い方
/* モーダル（最前面） */
.modal { position: fixed; z-index: 1000; }
/* ヘッダー（スクロールしても手前） */
.header { position: sticky; top: 0; z-index: 100; }
/* 背景の後ろに配置 */
.bg-decoration { position: absolute; z-index: -1; }いつ使う？
モーダル（ポップアップ）を最前面に出すとき、固定ヘッダーを他の要素より手前にするとき、ドロップダウンメニューを重ねて表示するときに使います。
間違いやすいポイント
❌ positionを指定せずにz-indexを書く
/* ❌ position: static（デフォルト）では効かない */
.box { z-index: 100; }
/* ✅ positionを指定する */
.box { position: relative; z-index: 100; }❌ z-indexの数値をむやみに大きくする
z-index: 99999 のような巨大な値は管理が困難になります。10, 100, 1000 のように段階的に使いましょう。
よくある疑問
Q: z-indexが効かないのはなぜ？
A: positionがstatic（デフォルト）のままだと効きません。position: relative; を追加しましょう。親要素のz-indexも影響します。
Q: z-indexの値はどのくらいにすべき？
A: 1, 10, 100のように段階的に設定するのがおすすめです。モーダル=100、ヘッダー=50、ドロップダウン=30のように役割で決めましょう。
Q: スタッキングコンテキストとは？
A: z-indexの比較が行われるグループのことです。親要素にz-indexやopacity等を指定すると新しいグループが作られ、子のz-indexは親の中でしか比較されません。
関連用語
📖 関連レッスン
レッスンを見る →