z-index

レイアウト・配置

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

構文

Syntax
z-index: auto | <integer>

コード例

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を指定しても効果がない。

関連プロパティ

ブラウザサポート

全ブラウザ対応