z-index
赤（z-index:1),青（z-index:0),緑（z-index:-1)
position:absoluteで重ねた後、z-indexで重なり順を変更
赤（z-index:1)
青（z-index:0)
緑（z-index:-1)
/*css*/
#red {
position:absolute;
top:150px;
left:50px;
z-index:1;
width:100px;
height:100px;
background:rgba(255,0,0,0.8);
}
#blue {
position:absolute;
top:160px;
left:60px;
z-index:0;
width:100px;
height:100px;
background:rgba(0,0,255,0.8);
}
#green {
position:absolute;
top:170px;
left:70px;
z-index:-1;
width:100px;
height:100px;
background:rgba(0,100,0,0.8);
}
z-indexを指定するにはpositionにabsoluteかrelativeが指定されている必要がある（postion:static以外）ことから、topやleftと同じようなposition指定なしでは使えないプロパティと思ってよい。
positionにstatic以外が振られれば、自動的にz-indexにauto;が降られる。
autoは後に記述した要素が画面手前に表示されるという重なり順のこと。
同じz-indexの値同士なら後から記述したものが上にくる？
z-indexの番号は基準に対して、いくつ＋－するかという意味。初期の基準はbody要素の0だから、0に対して+1か-1かするだけだからシンプル。だが、基準がもしz-index:2の状態だったら？-1を指定すると、2-1=1で階層は1となり、マイナスを指定しても0よりも階層が上の状態を作り出すことができる。
こんがらがるのが、親要素とその子要素にz-indexを指定して、互いを重ねあわせたい時の配置。例えば、divの中にpがあって、divにz-index:1をpに-1を指定しても、親要素であるdivの前に子要素のpがあがってきてしまう。これは、包括要素全体で1つの単位となっているため。
赤：親（z-index:1)、青：子（z-index:-1)
子（z-index:-1)
/*css*/
#m1 {
position:relative;
z-index:1;
width:100px;
height:100px;
background:rgba(255,0,0,0.8);
}
#m2 {
position:absolute;
top:10px;
left:10px;
z-index:-1;
width:100px;
height:100px;
background:rgba(0,0,255,0.8);
}
包括要素に対して、子供を親の後ろにさせたいなら、親にz-index:auto;を指定する。こうすることで、親と子供を切り離すことができるようになる。
赤：親（z-index:auto)、青：子（z-index:-1)
子（z-index:-1)
/*css*/
#m3 {
position:relative;
z-index:auto;
width:100px;
height:100px;
background:rgba(255,0,0,0.8);
}
#m4 {
position:absolute;
top:10px;
left:10px;
z-index:-1;
width:100px;
height:100px;
background:rgba(0,0,255,0.8);
}
包括要素に対して、子供を親の後ろにさせたいなら、親にz-index:auto;を指定する。こうすることで、親と子供を切り離すことができるようになる。
beforeやafterといった擬似要素についても同様で、擬似要素は子要素であるため、これらを親の後ろに回りこませたいのであれば、親にz-index:auto;を指定すること。
bodyに背景指定してz-index:-1;を別要素に指定してもbodyよりも後ろには入らないが、全体をdivやarticleといった大きなdiv要素でくくったときとかに、その包括divに背景を指定して、子要素にz-index:-1;が指定されていると、包括要素のデフォルトがautoなのでその下に回りこんでしまって見えなくなるみたい。全体覆う包括要素にz-index:0;を指定しておくと良い。
参考：56doc
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
