[プログラミング学習] 深堀りCSS : z-indexの不可解を克服せよ

2022年7月19日

テクノロジー

eyecatch 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
想像通り、-1が複数ある場合は、書いてある順番に表示されます。

-2について

z-index : -1
z-index : -2
z-index : -1
-2の値は、-1よりも下に表示されるようです。

親階層よりも下に表示する法則

HTMLのDOM構造はかなり強固なので、基本的に階層を飛び越えたz-indexは効力がありません。
z-index : -1
z-index : -2
z-index : -1
でも、親要素がautoだった場合に限り、マイナスの値が反映されます。
z-index : auto
z-index : -1
z-index : -2
でも-1の下階層に-2を書いても、-1の下には配置されません。 これは、兄弟階層の時のみ有効になるので、ややこしいですね。 でも、-1の下階層にあるので、autoよりも下には表示されます。 ややこしや〜。

深堀り結果

z-indexの特徴がかなり理解できたかと思いますが、ここまで複雑な使い方をするのは、稀なケースかもしれません。 今回ここまで深堀りしたのは、HTMLのDOM構造によって、とあるキャラクターの構造体を作ってアニメーションをさせようと考えた時に、こうした特性を知っておかないといけないという状態だったために、調査も含めて深堀りしてみました。 結果的にこの特性を生かした構成設計ができたので、改めてちゃんとした仕様を理解しておくことの重要性を感じました。 あと、個人的な経験から言うと、Web-APIなどのツールを作っている開発員の方で、フローティング系のシステムを作るときには、この仕様は熟知しておかなければいけませんね。 少しでもこのブログが参考になれば幸いです。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。