⌘K

z-indexプロパティ

z-indexプロパティは、複数の要素が 互いに重なり合う場合に、どの要素が前面に表示されるかを 設定します。

構文

cssセレクター {
  z-index: 数値 | auto;
}

数値は整数で、正の値または負の値である必要があります。 ゼロも指定可能です。

値

値 説明
数値 整数で要素の重なり順を指定します: 要素が重なり合う場合、z-indexの値が より大きい要素が前面に表示されます。
auto 重なり順は自動的に構築されます: HTMLコード内で後に記述された要素が前面に表示されます。

デフォルト値: auto。

例

この例では、ブロックはHTMLコード内での順序に従って 互いに重なり合います（z-indexは指定されておらず、 デフォルト値のautoとなります）。 最初のブロックが最背面（赤）、最後のブロックが 最前面（緑）になります: 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

例

z-indexを指定して重なり順を変更します。 赤いブロックに3、青いブロックに2、 緑のブロックに1を設定します。 重なり順は逆転し（z-indexが3の ブロックが最前面になります）: 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат:

BackpositionプロパティNext疑似要素 backdrop