[javascript & css] 再びz-indexの仕様を調査

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> 最初に、並列に３つのposition:absoluteで並べてみて、z-indexをセットしてみました。 .a = 3 .b = 2 .c = 1 数値が大きい値が手前に表示されているのがわかります。

マイナス値を入れてセット

次にマイナス値を入れてみるとどうでしょう？ 変更点のみのプログラムはこちら .z-index .a{ z-index:3; } .z-index .b{ z-index:-1; } .z-index .c{ z-index:1; }

マイナス値の値が変わるとちゃんと判定されるのか？検証

-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; }

階層構造の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; ここでわかるのは、.cの要素がz-index:-2とセットしているんですが、１階層上の.bの後ろに潜り込むことはできましたが、更に祖階層の.aの後ろに潜り込むことはできていません。 階層を越える場合、マイナス値を書くと条件を満たしている場合のみ親階層の下に潜ることができるようですね。

複数階層上よりも下に表示させる方法

ここが非常にわかりにくかったポイントなんですが、z-indexのデフォルト値は、"auto"という値になり、これが、z-index:0とは別物であると考えましょう。 上記のソースの.bの要素に"z-index:0"と書き換えてみると良くわかります。 そして、.c　の要素を.aの要素の下に潜り込ませる方法も、このauto値を利用するとできます。 .z-index .a{ background-color:#F88; z-index:auto; } どうですか？これ意味わかります？ 親の親階層であっても、autoの場合は、マイナス値が有効になってどんどんさかのぼって潜り込ませることができるようです。

調査結果レポート

ホンッとに、カオスのように感じてしまいました。 おそらく、この仕様を理解できていない人がこれを見ると、意味すら分からないと思います。 cssを使っていて、absoute　要素の前後表示が思ったとおりにできないと感じた人は、こうした調査を自分でやらないとなかなか見につかない感覚かもしれません。 とりあえず、今回の調査で、分かったポイントは、次のとおりですね。

・兄弟要素はプラス値もマイナス値も、想像通りに反映される ・z-indexのautoと0は明確に違う ・階層構造におけるマイナス値は上位のauto値にしか影響しない。

cssを使う人も増えてきているようなので、何かしらの参考になると幸いです。