CSSを甘く見ているやつは、WEB開発に失敗することを知っている、ユゲタです。
「CSSはプログラミングじゃない。」
「所詮は単なる装飾スクリプトだろ？」
「初心者用のコードでしょ？」
こんな事を言っている人は、WEBサイト制作に苦しんでしまうことでしょう。
CSSは、やればやるほど深いことに気がつくよく出来たスクリプト言語なんですよ。
変態チックにCSSを深堀りするのが好きなユゲタが、今回は、分かっていそうで完璧に理解できている人が少ない「z-index」を深堀りしてみたいと思います。
z-indexについて
とりあえず、超初心者の人は、次のリファレンスサイトを御覧ください。 https://developer.mozilla.org/ja/docs/Web/CSS/z-index 重要な箇所だけ引用します。z-index は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。 より大きな z-index を持つ要素はより小さな要素の上に重なります。要するに、DOM構造で要素同士が重なった時に、表示順番を指定するプロパティなんですね。 自分も、より高い数値を書いておけば、一番上に表示されて問題ないだろ？と程度に思っていましたが、いろいろなwebシステムを作っていく時に、 思ったとおりに行かないこともあったので、その原理原則を理解しておいたほうがいいでしょう。
数値とデフォルト値
<div class='a1'>
z-index : 5</div>
<div class='a2'>
z-index : 3</div>
<div class='a3'>
z-index : 1</div>
<div class='b1'>z-index : auto</div>
<div class='b2'>z-index : -1</div>
<div class='b3'>z-index : 0</div>
div{
display:block;
width:150px;
height:50px;
position:absolute;
text-align:center;
background-color:#FFA;
border:2px solid #A00;
border-radius:4px;
white-space:pre-wrap;
}
.a1{
top:50px; left:50px;
z-index:5;
}
.a2{
top:80px; left:70px;
z-index:3;
}
.a3{
top:110px; left:90px;
z-index:1;
}
.b1{
top:200px; left:50px;
z-index:auto;
line-height:50px;
}
.b2{
top:240px; left:70px;
z-index:-1;
line-height:50px;
}
.b3{
top:280px; left:90px;
z-index:0;
line-height:50px;
}
z-index : 5
z-index : 3
z-index : 1
z-index : auto
z-index : -1
z-index : 0
-1について
z-index : -1;という値にすると、すべての数値の下に配置されます。 では、-1が複数あった場合どういう風に配置されるのでしょう？z-index : -1
z-index : -1
z-index : -1
-2について
z-index : -1
z-index : -2
z-index : -1
親階層よりも下に表示する法則
HTMLのDOM構造はかなり強固なので、基本的に階層を飛び越えたz-indexは効力がありません。z-index : -1
z-index : -2
z-index : -1
z-index : auto
z-index : -1
z-index : -2
