重なりの順序を指定する


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:数字;で重なり順を指定します。
数字が大きいほど重なり順が上になります。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る