z-indexはHTMLの要素の重なり順（スタック順序）を制御するためによく使用され、デザインを形成する上で重要な働きをしますが、奥が深く、初学者には扱いにくいプロパティの一つです。z-index: 1 ;よりも z-index: 2;の方が数字が上なので重なりとしては上にくるはずですが、そう簡単にはいかないケースもあります。効かない原因はいくつかありますが、主にの２つが原因の時が多いように感じます。
■階層が同じでないと効かない
例えば、下記のようなHTMLがあったとします。
<div class=”boxes”>boxes
<div class=”box-1″>box-1</div>
<div class=”box-2″>box-2
<div class=”box-3″>box-3</div></div>
</div>
boxes という親要素があり、子要素に同階層のbox-1とbox-2があり、box-2の孫要素にbox-3があります。この場合、同じ階層のbox-1とbox-2の間だけでz-indexの重なり順の調整が可能です。仮にboxes を前に出してくて、z-index: 999;にしたとしても前面にはきません。
box-3も 階層が違うのでz-index: 3;のbox-1より、上にきません。これを理解するのに時間がかかってしまいました。
.boxes {
width: 300px;
height: 300px;
position: relative;
background: lightgray;
text-align: center;
z-index: 999;
}
.box-1 {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.box-2 {
width: 100px;
height: 100px;
background: lightcyan;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box-3 {
width: 50px;
height: 50px;
background: yellow;
z-index: 4;
position: relative;
}
