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

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

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

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

z-indexの超基礎

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

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

重なりのルールを解説

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

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

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

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

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

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

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

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

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

box1を例に考えると、

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

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

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

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

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

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

まとめ