z-indexレイヤーシステムとは
WebのUIで複数の要素が重なる際、どの要素が上に表示されるかを決めるのがz-indexです。値が大きいほど前面に描画されますが、同じstacking context内でのみ比較されます。
体系なく使うとz-index: 9999のような値がコードに散らばり、レイヤー競合のバグが増えます。最初から100単位のスケール(0・100・200…)で設計しておくと、チーム全体で一貫して使えます。
設計原則
Overlay(400)とModal(500)を必ず分けることで、ディム処理がモーダルの下に位置します。Toast(800)はModal(500)より高くする必要があり、モーダルが開いていても通知が見えるようにします。
stacking contextの注意点
transform・opacity < 1・filter・will-changeを適用した要素は新しいstacking contextを生成します。子要素のz-indexがいくら大きくても親のcontextを超えられないため、モーダルはReact Portalなどで<body>直下に描画するのが安全です。
よくある質問
トーストとモーダルはどちらのz-indexを高くすべきですか？
トーストを高くします。モーダルが開いていても通知は上に表示する必要があるため、トースト(800)はモーダル(500)より高く設定します。
positionなしでz-indexは機能しますか？
position: staticの要素ではz-indexは無視されます。relative・absolute・fixed・stickyの場合のみ有効です。FlexboxやGridの直接の子要素は例外です。
z-index: 9999のような大きな値は問題ですか？
動作はしますが保守が困難です。体系がなければ誰かがさらに大きな値を追加し続け、競合が発生します。100単位のスケールで設計することを推奨します。