z-index

z-indexは、ボックスの重ね順を指定するスタイルです。

解説

z-indexは要素の重なりの順番を指定します。
値（数値）が大きいほど手前に表示されます。

z-indexを使用するときは positionスタイルでstatic以外が指定され、
要素が重なるように配置されている必要があります。

構文

構文は以下になります。

値

z-indexには以下の値が指定できます。

太字の値は初期値です。

サンプル

要素d2とd3を重ねて表示して、d3を手前に表示させる

.d1{
  position:relative;
  height:120px;
}
.d2{
  background-color:skyblue;
  width:120px; height:60px;
  position:absolute;
  top:10px; left:10px;
  z-index:1;
}
.d3{
  background-color:red;
  width:120px; height:60px;
  position:absolute;
  top:40px; left:40px;
  z-index:2;
}

<div class="d1">
  <div class="d2">要素１</div>
  <div class="d3">要素２</div>
</div<

上記d2とd3の z-indexの値を入れ替えると以下のように表示されます。

関連項目

• position：要素を表示する時の基準位置を指定する

Tweet