z-index: ボックス要素で重なりの順番を指定
z-indexは、positionプロパティで位置決めされている要素の、重なりの順番を指定するプロパティです。
z-index: 値;
数値が大きくなるほど前面に表示されます。親より前面に表示するにはマイナスの値を指定します。何も指定しない場合は、先に記述したボックスが下に、後から記述したボックスが上に表示されます。
z-index プロパティ仕様
値 | |
---|---|
整数 | 1, 2, 3・・・ |
auto | 重なりの順番指定なし |
記述例
サンプル − ボックスの重なりの順番を指定
sample css ↓
.sample1_box {
position: absolute;
z-index: 3;
top: 100px;
left: 150px;
width: 200px;
height: 100px;
background-color: pink;
}
.sample2_box{
position: absolute;
z-index: 1;
top: 180px;
left: 90px;
width: 290px;
height: 130px;
background-color: khaki;
}
.sample3_box{
position: absolute;
z-index: 2;
top: 210px;
left: 280px;
width: 200px;
height: 100px;
background-color: skyblue;
}
html ↓
<html>
<body>
<div class="sample1_box">sample1 box</div>
<div class="sample2_box">sample2 box</div>
<div class="sample3_box">sample3 box</div>
</body>
</html>
実際の見え方 ↓