z-index
中級読み方：ゼットインデックス｜英語：Z Index
要素の重なり順を指定するプロパティで、数値が大きいほど手前に表示されるよ。positionが必要。
やさしい説明
z-indexは、要素の重なり順を指定するプロパティです。数値が大きいほど手前に表示されます。
机の上に紙を重ねるイメージです。一番上の紙が一番手前に見えますよね。z-indexの数値が大きい要素が「一番上の紙」になります。
注意点として、z-indexは position: static（デフォルト）以外の要素にしか効きません。relative・absolute・fixed・sticky のいずれかが必要です。
図解：z-indexの重なり
具体例・使い方
/* モーダル（最前面に表示） */
.modal { position: fixed; z-index: 1000; }
.modal-overlay { position: fixed; z-index: 900; }
/* 固定ヘッダー（スクロールしても手前に残る） */
.header { position: sticky; top: 0; z-index: 100; }
/* ドロップダウンメニュー */
.dropdown { position: absolute; z-index: 200; }
/* 装飾要素を背景の後ろに配置 */
.bg-decoration { position: absolute; z-index: -1; }z-indexの管理方法
/* CSS変数でz-indexを一元管理（推奨） */
:root {
--z-base: 1;
--z-dropdown: 100;
--z-header: 200;
--z-overlay: 900;
--z-modal: 1000;
--z-toast: 1100;
}
.header { position: sticky; top: 0; z-index: var(--z-header); }
.modal { position: fixed; z-index: var(--z-modal); }
.toast { position: fixed; z-index: var(--z-toast); }CSS変数（カスタムプロパティ）でz-indexを一元管理すると、「どの要素がどの高さにいるか」が一目でわかります。チームで開発するときに特に有効です。
いつ使う？
- モーダル・ダイアログを最前面に表示するとき
- 固定ヘッダーをコンテンツより手前にするとき
- ドロップダウンメニューやツールチップを重ねて表示するとき
- 装飾要素をコンテンツの背面に置くとき（
z-index: -1）
間違いやすいポイント
❌ position を指定せずに z-index を書く
position: static（デフォルト）の要素には z-index が効きません。必ず position: relative 以上を指定しましょう。
/* ❌ position: static（デフォルト）では効かない */
.box { z-index: 100; } /* 無視される */
/* ✅ position を指定する */
.box { position: relative; z-index: 100; }❌ z-index の数値をむやみに大きくする
z-index: 99999 のような巨大な値は管理が困難になります。1・10・100・1000 のように段階を決めて、CSS変数で管理するのがベストプラクティスです。
よくある疑問
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は親の中でしか比較されません。
関連用語
📖 関連レッスン
レッスンを見る →