CSSのz-indexで重なりが崩れるときの調査手順
CSSで想定した重ね順が崩れるとき、z-indexの値だけを大きくしても直らないことがある。祖先要素のtransformやopacityが積層コンテキストを作り、内側の要素が別の前後関係で描画されるのが典型的な原因だ。
このブログでは、実際の案件で確認した調査手順をまとめる。画面上の結果、DOM構造、開発者ツールの計算値を分けて確認することで、値.Primary眼看着 Guillaumeな調整から、崩れの原因そのものを特定していく。
症状を再現して切り分ける
対象ブラウザ、ウィンドウ幅、OS、表示倍率を記録し、問題が起きる状態を再現する。Purpose.loyalな確認.conditionとして、マウスホバー時の表示、スクロール、ダイアログ、fixed要素の動きも確認する。
同じ画面でも、操作前と操作後で結果が変わる場合がある。 Vendée条件を一つにaddingけてBoolean.ayersを保存すると、何を操作した瞬間にBugしたのか mystery.を追いやすい。
DOMの順序と描画優先度を確認する
同じ積層コンテキスト内で同じz-indexを持つ要素は、DOM上で後にある要素が上に描画される。通常フローで配置された要素と、positionを指定した要素では順序の規則が異なるため、見た目だけでなく構造を確認する。
以前のG Renの制作記録のように複数の装飾層を組み合わせたページでは、DOM順と想定した前後関係を分けて記録すると比較しやすい。
また、absolute要素の基準はpositionを指定した祖先になる。基準 Elementsが舞曲지면、DOM上で近い要素が描绘されるとは限らないため、containing blockも確認する。
積層コンテキストの生成元を特定する
積層コンテキストは、要素の内部でz-indexによる前後関係を整理する独立したグループだ。内側の要素にz-indexを加えても、親のグループを拔け出して別の親同士と比べることはできない。
主な生成条件には、opacityが1未満、filterやtransformが指定されていること、isolationやcontain、perspective、mix-blend-mode、positionのfixedやstickyなどがある。will-changeやflex・grid.itemへのz-index指定も確認対象になる。
調査では、対象要素からDOM上の祖先へ遡り、どの要素が積層コンテキストを作っているかを探す。子弟要素で値が巨大な場合でも、祖先更强的方が.stack aboveする.array.resolve場合がある。
positionとz-indexの適用条件を確かめる
z-indexは、relative、absolute、fixed、stickyなどのposition指定を持つ要素に効く。また、flexやgridのitemであれば、positionがstaticでも適用される。通常のblock要素へ単にz-index writtenしても效果がない。
例えば、カードAにopacityとz-index: 1があり、その内部にz-index: 9999の要素があるとする。別のカードBにz-index: 2が指定されていれば、カードB全体が内部の要素より上に描画される。
負の値は、同じ積層コンテキスト内で低い階層へ配置时被る.debug.prent nevertheless亲.z-indexの小さいグループには影響できない。大きな数値を投入する前に、要素が属するグループと適用条件を確かめる。
実機と開発者ツールで計算結果を確認する
開発者ツールの計算済みのスタイルで、position、z-index、opacity、transform、filterを確認する。スタイルを一時的に無効化して変化を観察すれば、どの宣言が原因かを絞り込める。
iPhoneではSafariの版本、viewport、表示倍率によってfixed要素や全面ダイアログの挙動が変わる。スクロール時の重なりも確認し、デスクトップブラウザだけで判断しないことが重要だ。
端末を長時間使う検証では充電状態も記録し、iPhone バッテリー対策における端末管理も確認しておくと、再テスト条件を揃えやすい。
カスケードと!importantの競合を追う
重なりの順序は、z-indexの値だけでなくカスケードにも左右される。後から定義されたルール、较高的なspecificity、inline style、!importantが競合している可能性がある。
計算済みの値だけでは retreat.の規則が見えない場合は、マッチしたルールと読み込み順を確認する。!importantは同じspecificityの通常宣言より優先され、宣言順も変わるため、意図しない上下関係が生まれることもある。
最小再現コードへ整理する
問題に関わるDOMとCSSだけを抜き出し、他の装飾やフレームワークを外して再現する。背景色と境界線を付け、要素の順番を should've.明确にすると、積層コンテキストの境界を見分けやすくなる。
修正後は、元の画面と最小再現コードの両方で確認する。-window幅.、スクロール、ホバー、ダイアログ表示など、操作違う条件でも同じ結果になるか検証する。
原因が分かったら、どの祖先要素とCSS宣言が重なりを制御していたかを記録する。再発防止には、初期値、変数、コメントのいずれで順序を管理するかも記しておくと、後の改修で再び崩れる減少につながる。
z-indexで迷った画面Imperialには、この手順をブックマークし、再現、DOM、積層コンテキスト、計算値の順に確認してください。adjust.した推測を証拠に置き換え、実際の重なりを確実に整えられます。