Zはマジンガーで、Vはコンバトラーという世代の、ユゲタです。
28は鉄人で、Aはダンガードです。（わからない人すみません）
でも、3Dの世界で、Zは、奥行きの事です。
z-indexについては、以前に見限った事をブログに書いたんですが、やはりインターネットブラウザでcssを書く時にこれと決別することはできません。
もうZ-INDEXに頼るのをやめた開発日誌
今回は、z-indexをjavascriｔのcanvasで再現する仕様があり、軽くソートしてみたら、全然前後判定がうまくいかなかったので、z-indexの仕様を改めて再調査してみようと思いました。
兄弟要素のz-index比較
cssのz-indexでややこしいのが、DOM構造の順番と親子構造にも依存してしまうので、この点について事前に調査してみた。整数値でセット
<div class='z-index'>
<div class='a'>a</div>
<div class='b'>b</div>
<div class='c'>c</div>
</div>
<style>
.z-index{
position:relative;
width:250px;
height:200px;
border:1px solid black;
}
.z-index > *{
display:flex;
align-items:flex-end;
width:100px;
height:70px;
position:absolute;
color:black;
padding:5px;
font-size:14px;
border:1px solid black;
border-radius:4px;
}
.z-index .a{
top:30px;
left:30px;
background-color:#F88;
z-index:3;
}
.z-index .b{
top:60px;
left:60px;
background-color:#8F8A;
z-index:2;
}
.z-index .c{
top:90px;
left:90px;
background-color:#88F;
z-index:1;
}
</style>
a
b
c
マイナス値を入れてセット
次にマイナス値を入れてみるとどうでしょう？ 変更点のみのプログラムはこちら .z-index .a{
z-index:3;
}
.z-index .b{
z-index:-1;
}
.z-index .c{
z-index:1;
}
a
b
c
マイナス値の値が変わるとちゃんと判定されるのか？検証
-2は-1よりも下に判定されるのか？ 以下のようにz-indexの値を変更してみると、ちゃんと-1 > -2になっていることが確認できました。 さらに、同じ-1の値の場合は、dom記述の後のほうが手前に来るようになります。（同列が無いというのが、使っていてわかりにくくなる点です） .z-index .a{
z-index:-1;
}
.z-index .b{
z-index:-1;
}
.z-index .c{
z-index:-2;
}
a
b
c
階層構造のz-index
次に階層構造のDOM構造を用意してみました。 cssも共通部分が若干変わっているので、変更のあるselectorのみ書いておきます。<div class='z-index'>
<div class='a'>a
<div class='b'>b
<div class='c'>c</div>
</div>
</div>
</div>
.z-index-1 *{
display:flex;
align-items:flex-end;
width:100px;
height:70px;
top:30px;
left:30px;
position:absolute;
color:black;
padding:5px;
font-size:14px;
border:1px solid black;
border-radius:4px;
}
.z-index-1 .a{
background-color:#F88;
z-index:0;
}
.z-index-1 .b{
background-color:#8F8A;
}
.z-index-1 .c{
background-color:#88F;
z-index:-2;
a
b
c
複数階層上よりも下に表示させる方法
ここが非常にわかりにくかったポイントなんですが、z-indexのデフォルト値は、"auto"という値になり、これが、z-index:0とは別物であると考えましょう。 上記のソースの.bの要素に"z-index:0"と書き換えてみると良くわかります。 そして、.c の要素を.aの要素の下に潜り込ませる方法も、このauto値を利用するとできます。 .z-index .a{
background-color:#F88;
z-index:auto;
}
a
b
c
調査結果レポート
ホンッとに、カオスのように感じてしまいました。 おそらく、この仕様を理解できていない人がこれを見ると、意味すら分からないと思います。 cssを使っていて、absoute 要素の前後表示が思ったとおりにできないと感じた人は、こうした調査を自分でやらないとなかなか見につかない感覚かもしれません。 とりあえず、今回の調査で、分かったポイントは、次のとおりですね。・兄弟要素はプラス値もマイナス値も、想像通りに反映される ・z-indexのautoと0は明確に違う ・階層構造におけるマイナス値は上位のauto値にしか影響しない。cssを使う人も増えてきているようなので、何かしらの参考になると幸いです。
