z-index, stacking context の説明


重なり順をコントロールするためには z-index を使えばいい。上にしたい要素ほど高い z-index の値を与えればいい。と思っていたら全然重なり順が思った通りにならない!!といった経験は CSS を書き始めたばかりの人間が必ず経験する出来事だと思う。

私わかったはず!

See the Pen vxwyze by nakanishi (@nakanishi) on CodePen.

まずこの記事を読んでほしいんですが、経験の浅いウェブディベロッパーが z-index で混乱するのは、次の原則を知らないからだと。「z-index は要素の position が absolute, fixed, ralative に指定されていないと機能しない。」作業で疲れてくるとこういうところを見逃しがちです。

その上で MDN のこの記事を読みます。Stacking Context に関する話です。

スタッキングコンテクストを正確に把握するのは難しいのですが、以下の部分が重要です。

It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

#4, #5, #6 の DIV は #3 の子要素なので、#4, #5, #6 の重なり順は DIV#3 の中だけで解決されます。DIV#3 のなかで重なり順が処理された後は、DIV#3 は一つ上の階層、つまりここでは Root エレメントの階層の中での重なり順の処理に移行します。ここではルート階層内の親要素とかなり順を考慮することになります。

つまり

  1. まずは重なり順に関係してくる要素には必ず position: relative, absolute, fixed のどれかを付ける。(他にも flex とか opacity:0 以外でもなるようだけれども、重なり順のコントロールのためには普通は使わない)
  2. 重なり順が z-index でコントロールできるのは「兄弟要素」の間だけ。
  3. 子要素は絶対に親要素の下には配置できない。
  4. 2,3 が起きるのは スタッキング・コンテクストという考え方が必要になる。
  5. スタッキング・コンテクストのダイジェスト:ある要素の中に potision: static 以外の position を持つ子要素がある場合、まずはその子要素の中だけで z-index の順番に重なり合う。この重なりが決まった時点で、それらの子要素は、親要素の上に乗っかって、それら全体で一枚の紙のような扱いになる。一枚の紙のようになった要素は、さらに親要素があって、兄弟要素があれば、兄弟要素の中でまたこのスタッキングコンテクストの処理をする。→以降無限にこの処理

ということで DOM ツリーの中で、同じ親要素を持つ要素同士 = 兄弟要素内でしか z-index の並び順は効かない。ってことですね。 わかればなんということはない!!

 

Leave a Reply

Your email address will not be published. Required fields are marked *