z-index

レイアウト・配置

要素の重ね順（奥行き順）を指定するプロパティです。値が大きいほど手前に表示されます。

構文

Syntax

z-index: auto | <integer>

.box1 {
  position: absolute;
  z-index: 10;
}
.box2 {
  position: absolute;
  z-index: 5;
}
.box3 {
  position: absolute;
  z-index: 0;
}

実行結果

z-index: 10

z-index: 5

z-index: 0（奥）

z-indexが大きいほど手前に表示されます

z-indexの値が大きいほど手前に表示されます。上記の例では.box1（z-index:10）が一番手前、.box3（z-index:0）が一番奥に重なります。positionが必要です。

.modal {
  position: fixed;
  z-index: 1000;
}
.overlay {
  position: fixed;
  z-index: 900;
}

実行結果

z-index: 10

z-index: 5

z-index: -1（背面）

z-indexが大きいほど手前に表示されます

モーダルウィンドウ（z-index:1000）をオーバーレイ（z-index:900）より手前に表示する例です。z-indexは重なり順を制御するのに便利です。

.back {
  position: relative;
  z-index: -1;
}

z-index:-1は他の要素より背面（下）に配置したい場合に使います。position指定が必須です。

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

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

全ブラウザ対応