重なり順（z-index）が効かず要素が隠れるときの原因と対処

z-indexはpositionが前提

z-indexはpositionがstatic以外(relative、absolute、fixed、sticky)の要素に対してのみ効きます。position:staticのまま(初期値)の要素にz-indexを書いても無視されます。これがz-indexが効かない最も多い原因です。

前面に出したい要素にposition:relativeとz-indexをセットで指定するのが基本です。relativeなら見た目の位置はそのままに重なり順だけ制御できます。

Flexアイテムやgridアイテムは例外的にpositionなしでもz-indexが効きますが、混乱を避けるため明示的にpositionを付けておくと安全です。

stacking context(重なり文脈)という壁

z-indexの比較は、同じstacking context内でのみ行われます。ある要素が独立した重なり文脈を作っていると、その中の子要素のz-indexがどれだけ大きくても、文脈の外側の要素を越えることはできません。

重なり文脈は、position+z-index指定のほか、opacityが1未満、transform、filter、will-change、isolation:isolateなどでも新たに生成されます。親にこれらが付いていると、子のz-indexが思うように効かない原因になります。

つまり「z-index:9999にしても前に出ない」ときは、その要素が属する重なり文脈の親自体が、競合相手より後ろに置かれていないかを疑う必要があります。

症状別チェック表

重なり順（z-index）が効かず要素が隠れるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

z-indexの不具合は、文脈の境界を見つけることが鍵です。次の順で確認してください。

1. 対象要素にposition(static以外)が指定されているか確認する
2. 前面に出したい要素と隠す要素が同じ親(同じ重なり文脈)にあるか確認する
3. 親要素にopacity・transform・filterなど文脈を作る指定がないか調べる
4. 文脈を作っている親同士のz-index/出現順を比較する
5. 必要なら親側のz-indexを調整して文脈ごと前面に出す

transformやopacityが落とし穴になる例

アニメーションのためにtransformを付けたカードや、フェード用にopacityを下げた親の中にあるモーダルやツールチップが、他の要素の下に潜ってしまう例は典型です。子のz-indexを上げても、親の重なり文脈の中での順位しか上がらないためです。

対処は、重ねたい要素をその制約のある親の外(例えばbody直下)に移動するか、親側の重なり順を調整することです。モーダルやドロップダウンをbody直下にポータルとして描画する設計は、この問題を避けるためでもあります。

isolation:isolateを使うと、意図的に重なり文脈を作って影響範囲を閉じ込められます。逆に予期せぬ文脈生成を避けたいなら、transformやopacityを乱用しないことも有効です。

重なりの再現を共有して確認する

z-indexの問題は文脈の構造に依存するため、言葉での説明より実際に重なっている状態を共有したほうが早く解決できます。修正前後のHTMLを並べて、どの親が文脈を作っているかを示すと議論が進みます。

再現用のHTMLを同僚や相談先に見せたいときは、ギガサイト便にドロップして発行される共有URLが手軽です。会員登録なしで公開でき、URLのまま中身を差し替えられるので、文脈を変えた検証を繰り返しながら同じリンクで共有できます。一時公開ページはnoindexで検索に出ません。