z-indexプロパティに指定できる値
z-indexプロパティには以下のような値を設定することができます。
| 値 | 内容 |
|---|---|
| auto | 初期値。HTMLを記述した順に要素を重ねる。 |
| 任意の数値 | 数値の大きい要素から順に上から重ねる。 |
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>ブラウザで表示してみると以下のようになります。
