16.z-indexプロパティは、重なりの順序を指定します。
positionプロパティで、static以外が指定されている場合のみ有効です。
適用要素:positionプロパティで「static」以外が指定されている要素
※★CSS
.box121 {
position: absolute;
background-color:#ffccff;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
z-index: 1;
}
.box122 {
position: absolute;
background-color:#ffcc33;
top: 40px;
left: 5px;
width: 100px;
height: 100px;
z-index: 2;
}
.box123 {
position: absolute;
background-color:#fccc5f;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
z-index: 3;
}
.box1211 {
position: relative;
background-color:#ffccff;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
z-index: 1;
}
.box1222 {
position: relative;
background-color:#ffcc33;
top: 40px;
left: 5px;
width: 100px;
height: 100px;
z-index: 2;
}
.box1233 {
position: relative;
background-color:#fccc5f;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
z-index: 3;
}
※★HTML
<div class="box121">box1</div>
<div class="box122">box2</div>
<div class="box123">box3</div>
<div class="box99">※画面左上表示</div>
<div class="box1211">box1</div>
<div class="box1222">box2</div>
<div class="box1233">box3</div>
box1
box2
box3
※画面左上表示
box1
box2
box3