CSS辞書

z-index

レイアウト・配置

要素の重ね順(奥行き順)を指定するプロパティです。値が大きいほど手前に表示されます。position: static以外の要素に適用され、モーダルやドロップダウンメニューなどの実装に不可欠です。

構文

Syntax
z-index: auto | <integer>

Tailwindでは

z-10z-index: 10
z-50z-index: 50
z-autoz-index: auto
-z-10z-index: -10

一般形: z-{n}

任意値: z-[999]

コード例

1

z-index: 1;
実行結果
z-index: 10
z-index: 5
z-index: 0(奥)
z-indexが大きいほど手前に表示されます

通常レイヤー(1段上)

2

z-index: 10;
実行結果
z-index: 10
z-index: 5
z-index: -1(背面)
z-indexが大きいほど手前に表示されます

上位レイヤー(10段上)

💡 TIPS

positionがstaticでない要素にのみ有効。モーダルやドロップダウンでよく使用。

⚠️ よくある間違い

positionを指定していない要素にz-indexを指定しても効果がない。

🤖 AIがよく間違えるポイント

AIは重なり問題に対して安易にz-index: 9999を出しがちですが、スタッキングコンテキストが違えば数値をいくら上げても勝てません。transformやopacity、filterが新しいスタッキングコンテキストを作る点はAIも人間も見落とす定番ポイントです。

💬 AIへの頼み方

z-indexを上げてもモーダルがヘッダーの下に隠れる。スタッキングコンテキストの観点で原因を特定して

このプロジェクトのz-index値をトークン化(変数で段階管理)して整理して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
1+
Safari
1+
Edge
12+