CSS / stacking context / overlay
CSS stacking contextとoverlayを確認する
z-indexだけでは直らない重なりの原因を固定例で確認します。実サイトのDOMや外部CSSは取得しません。
stacking contextの判断表
contextを作る要因と、overlayがどのcontextに属するかを分けて確認します。
| ケース | context生成要因 | overlay位置 | 確認点 |
|---|---|---|---|
| root-context | root | 同じroot | 基準contextを確認 |
| position-z-index | position + z-index | local context | 親のcontext内で比較 |
| opacity-context | opacity < 1 | opacity element内 | z-indexの比較範囲が変わる |
| transform-context | transform | transform element内 | 新しいcontextを確認 |
| nested-context-boundary | nested context | 親を越えない | child z-indexだけで逆転しない |
確認の順番
- overlayと背面要素のcontextを特定する。
- contextを作るopacity・transform・z-indexを探す。
- childのz-indexを親contextの外と比較しない。
- 実DOMとブラウザー表示は別途確認する。
固定例だけを表示します。実サイト、外部CSS、ユーザーCSSは扱いません。