重なりの順序を指定する
z-indexプロパティをを使用することで、重なりの順序の指定ができます。
なおz-indexを適用するのは、positionプロパティでstatic以外の値を指定する必要があります。
最後です。
一番上です。
真ん中です。
<div class="box_area"> <div class="box_01">最後です。</div> <div class="box_02">一番上です。</div> <div class="box_03">真ん中。</div> </div>
.box_area {
position: absolute;
top:400px;
margin:0px 0px 50px 0px;
}
.box_area div {
position: absolute;
width:100px;
height:100px;
}
.box_01 {
background-color: #B4DC69;
top:10px;
left:50px;
z-index: 0;
}
.box_02 {
background-color: #FFB46E;
top:40px;
left:90px;
z-index: 3;
}
.box_03 {
background-color: #69A0C8;
top:80px;
left:30px;
z-index: 2;
}
z-index:数字;で重なり順を指定します。
数字が大きいほど重なり順が上になります。
