CSSのz-indexとスタッキングコンテキスト — 重なり順の仕組みを理解する
z-indexが効かない・意図しない要素が前面に出てくる・モーダルが隠れてしまう、といった問題の多くはCSSのスタッキングコンテキストの理解不足によって起こります。重なり順のルールを正しく把握することでこれらの問題をスムーズに解決できます。
z-indexが効かない理由
z-indexは静的配置（position: static）の要素には効きません。position: relative / absolute / fixed / sticky のいずれかを設定した要素にのみ有効です。また、z-indexの値は同じスタッキングコンテキスト内での比較になるため、親要素のスタッキングコンテキストが分離していると子要素のz-indexを大きくしても他のコンテキストの要素より前面に出せません。
スタッキングコンテキストが生成される条件
新しいスタッキングコンテキストは①position + z-index（auto以外）、②opacity（1未満）、③transform（none以外）、④filter（none以外）、⑤will-change、⑥isolation: isolate などで生成されます。AnimationやTransitionの途中でも生成されることがあります。CSSライブラリやUIコンポーネントが予期せずコンテキストを作っていることもあります。
要素の重なり順のルール
スタッキングコンテキスト内の重なり順は①z-indexが負の要素（最背面）、②ブロックレベル要素、③フローティング要素、④インライン要素、⑤z-index: 0の要素、⑥z-indexが正の要素（最前面）の順です。同じz-indexでは後から書かれた要素が前面に来ます。
CSS Stacking Inspectorの活用方法
CSS Stacking InspectorにHTMLコードを貼り付けると、スタッキングコンテキストのツリー構造・各要素のz-indexとコンテキストの関係・潜在的な競合箇所をビジュアルで確認できます。モーダル・ドロップダウン・ツールチップが意図どおりに重なっているかのデバッグに役立ちます。