z-indexプロパティ

z-indexプロパティに指定できる値

z-indexプロパティには以下のような値を設定することができます。

z-indexプロパティを適用するにはpositionプロパティの値がrelative、absolute、fixed、stickyのいずれかが指定されている必要があります。

使用例

重ね順を指定した例です。

CSS コード例

.box1 {
  position: relative;
}
.box1 .element1 {
  z-index: -2;
  position: absolute;
  top: 10px;
  left: 10px;
}
.box1 .element2 {
  z-index: 3;
  position: absolute;
  top: 50px;
  left: 50px;
}
.box1 .element3 {
  z-index: 1;
  position: absolute;
  top: 90px;
  left: 90px;
}

HTML コード例

<div class="box1">
  <p class="element1">Element1</p>
  <p class="element2">Element2</p>
  <p class="element3">Element3</p>
</div>

ブラウザで表示してみると以下のようになります。