z-indexを999にしても手前へ出ない？親の重なりのまとまりを確かめよう

ポップアップのz-indexを大きくしたのに、隣のカードの後ろへ隠れる。そんなときは、その要素だけでなく親の重なりを見てみよう。

今回はposition:relativeを持つ二つの親と、その中のバッジを使うよ。CSSのpositionの基本を知っている人向けに、「どの集まりの中で順番を比べるか」をブラウザで確かめる。

子の数字だけで全体の順番は決まらない

重なりをひとまとまりとして扱う仕組みを、スタッキングコンテキストと呼ぶ。子の重なりを内部で決めたあと、そのまとまり自身が外側の順番へ参加するんだ。

作例では、AとBの親を同じ階層に置き、どちらもrelativeにする。

.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }
.badge { position: absolute; z-index: 999; }

Aの中のバッジに999を付けても、その999をBの2と直接比較するわけではない。この条件では、外側でAの1とBの2を比較するので、重なる部分ではBが手前に来るよ。

親の順番を変えてみる

ページ内作例の「Aの親を3にする」をオンにする。Aの親のz-indexだけが1から3へ変わり、バッジは999のまま。それでも、Bと重なった部分でバッジが手前に見えるようになる。

1. 初期状態で、紫のバッジと黄色いBが重なる場所を見る。
2. スイッチをオンにして、重なった場所の表示を比べる。
3. 「重なり地点の手前」の表示がBからバッジへ変わることを確かめる。
4. 「最初から試す」でAの親を1へ戻す。

作例の判定は、画面上の重なり地点にある要素を調べている。単に設定値を文字で並べているわけではないよ。

実際の画面では祖先をたどる

調べるときは、対象の要素から親・その親へ順にたどり、重なりのまとまりを作る指定がないかを見る。relativeやabsoluteにauto以外のz-indexを組み合わせることは、その一例だよ。

transformがnone以外、opacityが1未満、isolation:isolateなども作成条件に含まれる。FlexやGridの項目にも条件があるため、「positionがなければ絶対に関係しない」とは決めつけないでね。公式資料の作成条件と、開発者ツールの計算済みスタイルを照らし合わせよう。

画面から切れている場合は、重なり順だけでなく祖先のoverflowによる切り取りも確認する。z-indexを増やしても、別の原因の切り取りは解消しないことがある。

編集部では2026年10月29日にMDNの条件を確認し、作例の重なり地点で手前になる要素と、リセット後の状態をブラウザで検証した。通常の要素同士の例で、ダイアログなどのトップレイヤーとの優先順位を再現するものではないよ。absoluteの配置基準、overflowの違いも合わせて確認しよう。