スタッキングコンテキストとz-indexの合成順序

重なり順は「コンテキストの入れ子」が先、z-indexは後

要素の前後関係を決めるのは z-index の数値ではなく、まずスタッキングコンテキスト（stacking context）という入れ子構造です。スタッキングコンテキストとは、内部の要素群を1つの独立した重なり単位として扱う区画で、画面という奥行き軸（z軸）に沿った積み重ねは、この単位をツリー状に入れ子で解決します。比較は次の二段構えです。

1. ある要素とある要素の重なりは、まず共通の祖先スタッキングコンテキストまで遡る
2. その共通祖先の中で「どちらの子コンテキストが上か」を決め、勝った側の部分木がまるごと上に来る
3. z-index 同士の比較は「同じスタッキングコンテキストに直接属する要素どうし」でしか行われない

ここに「z-index: 9999 を付けたのに前に出ない」の正体があります。比較相手と別のスタッキングコンテキストに属していて、その親コンテキスト同士が既に順序を決めているなら、子の z-index をいくつ盛っても親の順位は覆りません。重なりは数値の大小ではなく、入れ子のどの階層で差がついたかで決まる辞書式（lexicographic）の構造です。詳細度を辞書式に比べる CSSカスケード・詳細度 と同じく、上位の段で勝負が付いたら下位の数値は見られません。

スタッキングコンテキストの生成条件

どの要素がスタッキングコンテキストを生成するかを知らないと、入れ子構造が読めません。生成条件は仕様の各所に分散していますが、実務で踏むものは次に集約できます。生成された瞬間、その要素を根とする部分木は外から見て1つの塊になります。

注意すべきは、opacity: 0.99 や transform: translateZ(0) のように見た目をほとんど変えない指定でもコンテキストが生成されることです。性能目的で付けた will-change: transform が、知らぬ間に部分木を独立させ、子孫の z-index の効く範囲を狭めます。GPU合成レイヤーへの昇格を扱う レンダリングパイプライン詳説 と重なるのはこのためで、合成レイヤー化とスタッキングコンテキスト生成はしばしば同じプロパティが引き金になります。

1コンテキスト内部のペイント順序：7段の決定木

スタッキングコンテキストが1つ与えられたとき、その内部の要素をどの順で奥から手前へ積むかは、CSS2.2 が定める固定の決定木で決まります。下に挙げた順で下（奥）から上（手前）へ描かれ、後に描くものが手前に来ます。

1. このコンテキストを生成した要素自身の背景・ボーダー（最も奥）
2. z-index が負の子スタッキングコンテキスト（値の小さい順）
3. 通常フローの非インライン・非ポジション要素（ブロックボックス）
4. フロート（float）した要素
5. 通常フローのインラインレベル要素
6. z-index が auto または 0 のポジション要素・子コンテキスト
7. z-index が正の子スタッキングコンテキスト（値の大きいほど手前）

この7段は固定で、z-index が効くのは2段目（負）と6段目（0/auto）と7段目（正）の相対順を動かすときだけです。重要な帰結が2つあります。第一に、負の z-index を持つ子は、親の背景（1段目）より手前だが、親の通常フロー内容（3段目以降）より奥に潜ります。これが「z-index: -1 の要素が親の背景の上・テキストの下に挟まる」挙動の根拠です。第二に、ポジションされていない通常フローのブロックは3段目に固定で、z-index を持てません。だから z-index を効かせたい要素には position（または transform 等）が要ります。

なぜz-indexが「効かない」のか：境界の見抜き方

「z-index が効かない」相談はほぼ次の3パターンに帰着します。原理が分かれば切り分けは機械的です。

切り分けの第一手は対象要素の祖先を root まで遡り、スタッキングコンテキストを生成している要素を列挙することです。生成要素の連なりが入れ子の階層であり、2要素の重なりはその最も近い共通祖先コンテキスト内での順位に還元されます。比較相手と異なる枝に分かれた時点で、各枝の根（子コンテキスト）の順位が天井になり、内部の z-index はその天井を超えられません。

isolationで重なりを設計する

isolation: isolate は、副作用なくスタッキングコンテキストだけを生成するための専用値です。opacity や transform のように見た目を変えず、純粋に「ここから内側を1つの重なり単位として閉じる」意図を宣言できます。これはコンポーネント設計で効きます。再利用部品の根に isolation: isolate を置けば、その内部の z-index 戦争は外部のグローバルな z-index 体系と完全に隔離され、z-index: 2 程度の小さな値で部品内を組み立てつつ、外への漏れを防げます。

.component-root { isolation: isolate; }  /* 内部の z-index は外へ漏れない */
.component-root .tooltip { z-index: 10; } /* この 10 はコンポーネント内ローカル */

逆に言えば、意図せぬコンテキスト生成こそが事故の温床です。設計としては「重なりを閉じたい境界には明示的に isolation: isolate を置き、それ以外では opacity や transform を不用意に親へ付けない」が定石になります。重なりの設計は、セレクタやボックスモデルの土台である CSS と、サイズ確定後の描画段である リフローとリペイントの分類 の中間にある、描画順（paint order）の層を扱っていると捉えると位置づけが明確になります。

まとめ