z-indexを自分なりに解釈していく

重なり順が思った通りにならない…

予期しない挙動にいつも振り回され、場当たり的に強行突破してきていました。
この度改めてz-indexのスタッキングコンテキストについて勉強し以下のサイト様を参考に重なり順のフローチャートを作成しました。自分なりの解釈なのでもし違うよ!とかあれば教えてくださると幸いです。

黄色が「はい」、灰色が「いいえ」です。
雑な図なので私自身も後から見返したら???となりそうな予感。

大丈夫、未来の私のためにもこの熱量のままザザザっとどういう意味か書いていきますね!

z-indexってなに?

そもそもz-indexって何だっけって話です。

表示の強さを示すプロパティで、数字が大きければ大きいほど前面に表示されます。

z-index:0;といった調子で数値で指定します。
z-index:1とz-index:2があったら2が前面に表示される、と…いうわけです。

そして、z-indexだけ指定してもプロパティの値は反映されません。
効かせるためには、必ずpositionの指定が必要です。
厳密にはpositon:staticという初期値以外の何かが指定されていないといけないです。

数字で指定して、positonをなんかつければいいんでしょ?と
それだけ聞くととても簡単そうに思えます。ところがどっこい、これが一筋縄ではいかないのです。

前面に表示する、と書きましたが、何の要素を基準に前に配置するの?という話です。
htmlタグを基準にそれより前に表示するのか、それとも、親要素よりも前に表示するのか。
そうそれが、スタッキングコンテキストなのです。

スタッキングコンテキストになる条件

スタッキングコンテキストの力について説明する前に、何がどうなるとスタッキングコンテキストに該当するのかをお伝えします。これが実に多数のパターンがあり、非常にややこしいポイントなのです。有名なものはz-indexが指定アリ、positonがstatic以外です。

他の要件はあとでも触れますが、もっと細かいものが知りたい場合はMDNをご参照ください。

スタッキングコンテキストにはどんな力があるのか

私がない頭をひねって色々試してみた結果、スタッキングコンテキスト(重ね合わせコンテキスト)は2つの効力をもつ要素と言えそうです。

  • 子要素のz-indexの参照元となる
  • 非スタッキングコンテキストよりも前に表示される

1つずつ詳細を書いていきます。

子要素のz-indexの参照元となる

z-indexはほかのすべての要素よりも前に出るイメージがあります。z-indexが参照する先がmainタグかのような印象を受けてきました。

ただ、z-indexが指定されている要素の親要素がスタッキングコンテキストであると、親要素を基準にして前、または後ろに表示されるます。つまり、親要素がスタッキングコンテキストなら、z-indexの適用範囲はスタッキングコンテキストの中に留まるのです。

See the Pen Untitled by ao___ (@ao___) on CodePen.

上記のように、単純に数の比較だけであればBの中の箱が最前面に表示されるはずです。
しかしながらそうはならずAの箱よりも後ろに表示されております。これは親要素であるBの箱がスタッキングコンテキストだからです。
スタッキングコンテキストの子要素はz-indexの力を親であるスタッキングコンテキストにしか効かせられないのです。

スタッキングコンテキストの中で俺が一番だぜ!とでしゃばることはできても、親元から離れほかの要素たちとの比較に持ち込まれることはありません。子の表示範囲をつかさどる力がスタッキングコンテキストにはあると言えるでしょう。

非スタッキングコンテキストよりも前に表示される

私が見た限りで明文化されているか分からなかったのですが、スタッキングコンテキストはスタッキングコンテキストではない要素よりも前に表示される特性があるように思えます。

先に、有名なスタッキングコンテキストは「 z-indexが指定アリ、positonがstatic以外です。 」と書きましたが、一方で要件は多数あるともお伝えしました。そう、z-indexの指定がなくてもスタッキングコンテキストに認定されるものがあるのです。

よく使うプロパティで言うとtranformやopacityが挙げられます。
z-indexの指定の有無にかかわらず、スタッキングコンテキストになったら普通の要素よりも前に表示されるのです。

See the Pen Untitled by ao___ (@ao___) on CodePen.

通常、後から出てきた要素のほうが前に表示されるものですが、上記の例では前に記述されているBOXAのほうが後から書かれているBOXBよりも前に表示されています。

これは、BOXAがスタッキングコンテキストだからです。tranformの指定がされていると、その時点でそいつはスタッキングコンテキストになります。ただ、z-indexがあるわけではないので、z-indexの指定があるスタッキングコンテキストより手前に表示されることはありません。

このように、スタッキングコンテキストの罠は色々なところに隠されていることを理解しないとあれ??思ったように動かんなあという事態が連発してしまうわけです。

例外:positon:relativeとabsoluteの狭間

スタッキングコンテキストの特性は分かったからもういいだろ、と言いたいところですが、最後に1つ例外があります。それがposition:relativeとpositon:absoluteです。

この2つの値はそれぞれそれ単体ではスタッキングコンテキストの定義には含まれません。MDNにも以下のように記述があります。

position の値が absolute または relative であり、かつ z-index の値が auto 以外の要素

重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN

そう、z-indexの値がない場合はスタッキングコンテキストにはならないということなのです。

これだけ読むとabsolute または relativeがあるだけでは普通の要素と同じように振舞うと思うじゃないですか。違うんです。普通の要素より手前に表示されるのです。

See the Pen Untitled by ao___ (@ao___) on CodePen.

relativeが指定されている先発のAの箱が後発のBの箱よりも手前に表示されています。positonは配置位置を整えるプロパティだから、その配置につこうと頑張るせいでこうなるのかなと勝手に解釈しました。

ただ、relativeがあるだけではスタッキングコンテキストにはなりません。
Aの中の箱のz-indexは親要素を超えて適用されています。親がスタッキングコンテキストでz-index:-1;の場合、Aより後ろでBより手前に表示されるはずです。そうはならず、一番後ろに回り込んでいることからもスタッキングコンテキストではない何かであることが伺えます。

z-indexなしスタッキングコンテキストと互角

スタッキングコンテキストではないのですが、z-indexの値を持たないスタッキングコンテキストとは互角に戦うようです。

See the Pen Untitled by ao___ (@ao___) on CodePen.

スタッキングコンテキストが優勢であればBOXCがBOXAより前に表示されそうですが、完全にhmtlの記述順通りの重なりとなっております。

生態がいまいちつかみきれていないものの、positon:relativeまたはabsoluteがあると、スタッキングコンテキストではないが、非スタッキングコンテキストよりは手前に表示されるということのようです。

重なり順を把握するまでの流れ

これまでお伝えしてきたことを総括すると、z-indexの反映のされ方を予想するためには

  • 自分はスタッキングコンテキストの子要素ではないか
    子要素であればz-indexは親要素の範囲内でしか機能しないと心得るべし
  • 自分がスタッキングコンテキストではないか
  • スタッキングコンテキストの場合、z-indexの有無
  • スタッキングコンテキストではない場合、positonが absolute または relative ではないか

これらに注意する必要があります。
注意していくとz-indexの切り口では要素が4つに分類できると考えました。それが

  • スタッキングコンテキストの子要素(親要素を参照する井の中の蛙要素)
  • positonが absolute または relative で、かつpositionの指定がない(偽スタッキングコンテキスト)
  • z-indexなしのスタッキングコンテキスト
  • z-inexありのスタッキングコンテキスト

です。箇条書きの順で、下に行けば行くほど表示の効力が強くなります。
偽スタッキングコンテキストとz-indexなしスタッキングコンテキストは互角ですが。

そして、4つの要素分類のうちどれに該当するかを段階的に示した図がフローチャートです。

これで誰かに伝わるのだろうか…伝わったらいいな…

とりあえずスタッキングコンテキストになる要件はめっちゃいっぱいあるということと、positonは厄介であるということを肝に銘じて明日からまた勉強継続したいと思います。

おしまい

参考サイト再掲

  • 君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA
  • 重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN
  • 青のポートフォリオサイト

    新着記事

  • 2021年12月
  • 2021年10月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2020年12月
  • カテゴリ

  • WEB制作
  • 投稿記事一覧に戻る

    コメント

    メールアドレスは公開されませんのでご安心ください。
    また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。



    *