概要
- z-index の値はその要素が含まれる「スタッキングコンテキスト」内での相対値。
- 特定の CSS プロパティの組み合わせによって自動で「スタッキングコンテキスト」が作られている。
- z-index にやたらとでかい数字をつけているのをたまに見るが、でかい数字をつけたからと言って必ず Z 軸上で上に来るわけではない。
- スタッキングコンテキスト自体がそもそも下にある場合は、どんなにでかい数字をつけてもその上に重なっているスタッキングコンテキストの要素より上に来ることはない。
詳細
この例のページにある画像を見ると分かりやすい。
よく意識するのは以下のパターン
- z-indexに数字を指定して、以下のいずれかを満たす
- ① position: absolute or relative
- ② flexアイテム
- ③ gridアイテム
- ④ position: fixed or sticky
- ⑤ opacity: 1未満
- ⑥ transformにnone以外の値を指定
要素の Z 軸上での位置を制御したい場合は、「DOM ツリー上のどこで重ね合わせコンテキストを作るか」 を意識すると良い。
mix-blend-mode, filter, perspective, clip-path, mask / mask-image / mask-border, isolation, -webkit-overflow-scrolling, will-change, contain
これらも関係するけど、この辺は使うタイミングがそんなに多くないから、関係することだけは覚えておいて実際に気になる場合は都度 MDN とかを調べればOK。
position: absolute
これに加えて、「position: absoluteにした要素はスタッキングコンテキストは作られないけど通常の兄弟要素の上に重なる」 というのも重要（これはスタッキングコンテキストとは関係ない仕様）。
また、absolute同士は感覚通りDOMツリー内での登場順に重なる。