CSS）z-indexのベストプラクティスを考える

CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな

[akahigeg]

z-index雰囲気だけで使ってたから助かる

[mayumayu_nimolove]

よく分かるけどそれやらなくても大半が事足りるし、知見が溜まってるからね。逆にどういうレイアウトだと便利か知りたい。利用シーン。一応調べるけど。

[dorapon2000]

“基本的には、ひとつのコンポーネントの中で重ね順のコントロールを完結するべきです。［コンポーネントAの中のある要素］と、［コンポーネントBの中のある要素］の重ね順をコントロールするべきではありません。”

[l-liroki]

z-index 警察をする時にとても助かる記事。お世話になっております！！！

[Keisuke69]

これはまたマニアックな…

[ustam]

通常のウェブページでz-index を使っていいのは1ページに一箇所だけだ。z-index: 1;のみ。それができないやつは技術と経験が足りない。

[sigwyg]

1か0か-1しか使わないなあ最近

[radicode]

[]z-indexのベストプラクティスを考える😌 中でも変数を使ってコントロールする方法は、ルール定義もシンプルになりとても良さそうですね✨

[xlc]

上に重ねる要素を後に配置すればz-indexは不要。誤った構造のコンテンツをCSSだけで修正するときの「方便」だと思ってる。

[Shinwiki]

グローバルz-indexくれ

[spark7]

z-index使うのは設計が間違ってる感あるな

[sotq17]

z-indexのベストプラクティスを考える

[hiro14aki]

変数定義はやってたけどこれは確かに良さそう → z-index: calc(var(--z-index-〇〇) + 1);

[guru_guru]

なんとなくで理解していたことがまとめられていた。乙。

[hyirm]

私も同じ考えだった。この部分に笑った😆 “そうならないために「z-index用の変数を増やすときは上長に申請書類を提出し、ハンコで承認を得たうえで厳密に保管する」などとルールを決めておくべきでしょう。”

[kndkndknd]

知見だ

[mricopp]

個別にz-indexおいてるとほんとに管理できなくなるから自分も_setting.scssとかに配置するようにしてる