各グループで親・子・孫の z-index 設定有無を変えています。hover 時は「同階層 + 親要素まで」を入れ子の div 形式で表示します。
「stacking context」は、重なり順を決める“箱のルール”です。新しい箱が作られると、その中だけで前後関係が決まり、外側の要素とは比べにくくなります。
| 状態 | stacking context 作る？ | わかりやすい意味 |
|---|---|---|
| position: static | 作らない | `z-index` が効かない |
| position: relative + z:auto | 作らない | 親のルールのまま |
| position: relative + z:0 | 作る | 新しい箱ができる |
| transform あり | 作る | `z-index` 値に関係なく箱ができる |
| opacity < 1 | 作る | 透過でも箱ができる |
P:auto / C:auto / G:auto
3階層とも新しい箱を作りません。全員が同じ大きなルールの中で前後が決まる、基本パターンです。
P:20 / C:auto / G:auto
親だけが「前に出る優先度」を持ちます。子と孫は親の中のルールに従うため、外との比較は親単位で見ます。
P:auto / C:10,30 / G:auto
兄弟の子同士で前後がはっきり分かれます（10より30が前）。孫は、それぞれ自分の親の子の中で並びます。
P:auto / C:auto / G:5,50
いちばん下の孫だけに優先度を付けた例です。孫同士の差は出ますが、親・子のルールの外には直接出ません。
P:15 / C:2,40 / G:auto
親が外側との前後を決め、子が内側の前後を決める2段構えです。実運用で起きやすい構成です。
P:8 / C:auto / G:3,60
子ではなく孫に直接優先度を付けた例です。見た目は大きく変わっても、外側との比較は親の単位で行われます。
table header: position:sticky / z-index:1
表の本体だけをスクロールしても、ヘッダー行が上部に固定され続けるパターンです。実務でよくある「一覧テーブル」の構成を再現しています。
| ID | 項目 | 状態 | z-index |
|---|---|---|---|
| 1 | 行 01 | normal | auto |
| 2 | 行 02 | normal | auto |
| 3 | 行 03 | normal | auto |
| 4 | 行 04 | normal | auto |
| 5 | 行 05 | normal | auto |
| 6 | 行 06 | normal | auto |
| 7 | 行 07 | normal | auto |
| 8 | 行 08 | normal | auto |
| 9 | 行 09 | normal | auto |
| 10 | 行 10 | normal | auto |
| 11 | 行 11 | normal | auto |
| 12 | 行 12 | normal | auto |
| 13 | 行 13 | normal | auto |
| 14 | 行 14 | normal | auto |
| 15 | 行 15 | normal | auto |
| 16 | 行 16 | normal | auto |
| 17 | 行 17 | normal | auto |
| 18 | 行 18 | normal | auto |