CSS

【CSS】z-indexのルールを正しく理解する

駆け出しコーダーがぶつかる壁の一つに、z-indexがあります。

Progateなどの無料学習サイトでは最低限の使い方しか解説していないため、
実際に実務で働きだすと、独学で勉強してきた方は必ずz-indexの壁にぶつかります。

私も駆け出しの時にはz-indexの問題によくハマっていました。
一度理解してしまえば今後悩むこともないので、早めに掘り下げて理解しておくことがおすすめ。

z-indexの超基礎

z-indexの超基礎は理解している前提で解説します。
超基礎とは、下記項目の内容を理解していることです。

  • z-indexは、要素同士の重なり順序を指定できるプロパティ
  • 「z-index:数値」を指定し、数値が大きい方が前面に表示される
  • z-indexを指定するときは、position:relativeまたはabsoluteをセットで指定しないと効かない

この辺までは、分かりやすく解説されているサイトはたくさんあるので、
本記事では割愛します。

重なりのルールを解説

z-indexはやみくもに数値を大きくすれば、それが一番前面に表示されるわけではありません。

あるグループの中にいるときでしかz-indexは効かないのです。
あるグループ、というのが「スタックコンテキスト」です。

つまり、スタックコンテキストを構成するグループの中でしかz-indexは効きません。
HTMLの構成も非常に重要になってきます。

スタックコンテキストって何?

スタックコンテキストという用語のせいで、z-indexへの理解が遅れている人も多い気がします。
もっと分かりやすい訳とかなかったのかな。。

簡単に説明すると、スタックコンテキストとは
「ある条件において作られる、要素のグループ」のことです。

※ある条件について、ここでは
"「position:relativeまたはabsolute」かつ「z-index:auto以外の整数」を指定すること"
と思ってください。
他にもありますが、大体この条件が使われます。


上記のコードでは、box1に「position:relativeかつz-index:整数」を指定すると、
box1を親とするその子孫要素のグループが作られます。
これがスタックコンテキストとなります。

htmlはデフォルトでスタックコンテキスト(ルートスタックコンテキスト)を構成しているので、
何も指定しなくてもbox1やbox2はルートスタックコンテキストの構成要素となります。

重要

z-indexの重なりは、スタックコンテキスト内の
子孫関係、親子関係、兄弟関係にある要素において、指定できる

box1を例に考えると、

親子関係
box1 ↔︎ box1-1
box1 ↔︎ box1-2
兄弟関係
box1-1 ↔︎ box1-2

ルートスタックコンテキストを例に考えると、

子孫関係
html ↔︎ box2-1
親子関係
html ↔︎ box1
html ↔︎ box2
兄弟関係
box1 ↔︎ box2

なので、まず要素の重なりを指定したいと思った時は、
スタックコンテキストを意識してHTML/CSSを作ればうまくいきます。

スタックコンテキストができる条件とは?

今回はスタックコンテキストが作られる条件を
"「position:relativeまたはabsolute」かつ「z-index:auto以外の整数」を指定する"
としましたが、他にもいろいろあります。

  • position:fixedまたはstickyを指定する
  • opacity:1以下の値を指定する

詳しくは下記のリンクで確認できます。
重ね合わせコンテキスト

ただ、これらの条件はあまり頻繁に使うわけではないので、
うまくいかないな、と思った時に疑うくらいでいいと思います。

まとめ

  • z-indexはスタックコンテキスト内の親子関係、兄弟関係で指定が可能
  • スタックコンテキストとは、ある条件で作られる要素の集まりグループのこと
  • ある条件とは「position:relativeまたはabsolute、かつz-index:整数」を指定すること
  • 条件は他にもいろいろあるけど、とりあえずこれを覚えておけばOK

-CSS
-,

© 2022 EgTips Powered by AFFINGER5