初めに

この記事はフラー株式会社 Advent Calendar 2023の25日目の記事になります。
24日目はyoRyuuuuuさんで急に PC が壊れることに備えようでした。

重ね合わせについては数年前から勉強自体はしていましたが、この機会にアウトプットをしておこうと思います。

CSSの重ね合わせについては多くの人が解説をしているので、私は勉強して感じたことを書こうと思います。
（つまりただのポエムです。）

CSSの重ね合わせに対する問題意識

どこでも言われている話ではありますが、重ね合わせで問題になってくるのは、重ね合わせのルールが複雑で、「実際に表示される際の重ね合わせ順が想定通りにいかない」というところだと思っています。
特にz-indexの扱いは難しいなと思っています。

今のWebアプリの開発ではコンポーネントからページを作るのが当たり前になっているので、コンポーネントにz-indexを持っていると、コンポーネントの組み合わせによって意図しない重ね合わせが発生してしまう可能性があります。

それぞれのコンポーネントのz-indexをうまく調整してあげれば重ね合わせの順序を調整できますが、後から追加開発や仕様変更でコンポーネントのz-indexを触る必要が出てきたときに、他のコンポーネントへの影響を意識する必要が出てきます。
そうなってしまうと、開発がやりづらくなってしまいます。

この辺りについて初心者のころから悩まされ続けてきたため、「なるべく重ね合わせもわかりやすい設計を意識していこう」と思い、勉強するに至りました。
（勉強する経緯については、先輩エンジニアの方に重ね合わせについていろいろ指摘されてきたという背景もありますが......。）

CSSの重ね合わせの勉強方法

MDNのCSS の z-index を理解するの中身をきちんと読んだくらいです。

それだけではありますが、普段開発するのに必要な知識としては十分かなと感じています。

一通り勉強して感じたこと

一通り記事を読んで、押さえておくべきは、

z-indexなしの重ね合わせのルール
重ね合わせコンテキスト

の2つかなと思っています。

自分が先輩エンジニアから言われていたことではありますが、「まずz-indexを使わずに何とかできないか検討する」というのが重ね合わせを考える上で大事だと思っています。
その考えを実現するうえでz-indexなしの重ね合わせは重要だなと思っています。

基本的に位置指定要素であるかどうか、HTMLでの出現順によって重ね合わせ順が変わるという話であり、ここさえ押さえてしまえばある程度z-indexに頼らなくてもレイアウトを実現することができると思っています。

ただ、それでも無理な時は無理です。
（HTMLの出現順を捻じ曲げればz-indexなしで重ね合わせ順をコントロールできる場合もありますが、タブフォーカスの順序に影響してきたりするのでアクセシビリティ的によくない場合があります。そういう時は素直にあきらめましょう。）

そんなときに重ね合わせコンテキストが生きてくると思います。

MDNの重ね合わせコンテキストの説明ページに書かれていますが、重ね合わせコンテキストの子要素のz-indexはその親要素にしか意味がありません。
この特性を生かして、z-indexを含むコンポーネントについては重ね合わせコンテキストを作って、z-indexの影響範囲をコンポーネントに閉じ込めてしまうことができます。

そうすることで、作ったコンポーネントを別のコンポーネントで配置する場合、作ったコンポーネント内部の重ね合わせを考慮する必要がなく、コンポーネント同士の重ね合わせだけ気にすればよくなります。

以上のような感じで、

z-indexなしの重ね合わせのルール
重ね合わせコンテキスト

を押さえておけば、

z-indexなしである程度重ね合わせをコントロールできるようになる
z-indexを使う場合でも、z-indexの影響範囲を適切に制限できる

という風になれるかなと思っています。

それができれば、重ね合わせで苦しむことは少なくなるのかなと思います。

これからの課題

「なるべく重ね合わせもわかりやすい設計を意識していこう」という目標を目指したとき、z-indexなしの重ね合わせはある程度実践できるかなと思っています。

問題は重ね合わせコンテキストの方で、重ね合わせコンテキスト自体が分かりにくいので、一緒に開発しているエンジニア、コードを引き継ぐエンジニアに意図が伝わるかという点です。
（だからこそz-indexを使わないでコントロールできるのが一番よいのだと感じています。）

自分は今回勉強したことで何となくつかめましたが、全員が全員重ね合わせコンテキストを知っているわけではありません。

自分はよくisolationプロパティを使って重ね合わせコンテキストを作成しようとしますが、エンジニア始めたてのころ自分がそんなコードを見ても「おまじないか何かかな？」と思ってしまう自信があります。

こればかりはCSSの仕様を理解してもらうしかないので、コードレビューや勉強会の場で理解を得るのが一番だと思っていますが、なんか他にいい伝え方がないかなーと考え中です。

最後に

今年のフラー株式会社 Advent Calendar 2023はこれでおしまいです。
毎年そうですが、カレンダーに参加してくれる方には感謝しかありません。
来年もこうして続けられればなと思います。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index