cssの重なり表現の仕組みについて

1. スタック文脈
@NAKAJITA

2. Z-index
 z軸方向の重なりを定義するもの
 https://jsfiddle.net/c7wtf20c/

3. 原理
 数値の数だけZ軸方向に要素がスタックされていって重なりを表現してい
る
 これがz軸方向のスタックの基準点になるもののことをスタック文脈とい
う。
 ルート要素(html要素)はスタック文脈を形成するので基本的にはルートを
起点としてz-indexの順序は決定される

4. スタック文脈
 スタック文脈は階層構造を形成する

5. スタック文脈が形成されるケース
 ルート要素（HTML）
 位置指定されていて（absolutely か relatively）、z-index 値が "auto" 以外
の要素
 z-index 値が "auto" 以外の flex アイテム
 1 未満の opacity 値を持つ要素
 transform 値が "none" 以外の要素
 mix-blend-mode 値が "normal" 以外の要素
 isolation 値が “isolate” に指定されている要素
 position: fixed が常に新しいスタック文脈を作ります。z-index が “auto”
の場合にもです
 いずれかのプロパティの名前が will-change に指定されている（たとえこ
のプロパティが書かなくても）要素（この記事をご覧ください）
 -webkit-overflow-scrolling 値が "touch" に指定されている要素

6. よくでるやつ
 ルート要素（HTML）
 位置指定されていて（absolutely か relatively）、z-index 値が “auto” 以外
の要素
 position: fixed が常に新しいスタック文脈を作ります。z-index が “auto”
の場合にもです
こいつら

7. position系
 https://jsfiddle.net/2grs0a6e/
 Bの上に白透明のやつを突っ込もうとしたサンプル
 上の方はモダルとCがスタック文脈を形成してる(Cの方がスタックレベル
が高い)
 下の方はモダルとBとCがスタック文脈を形成してる。 CはBのローカルス
タック文脈なのでBとモダルでBがモダルに負けてればCのz-indexをいくら
もろうが勝てない

8. Absolute/relative
 Absoluteとかrelativeはz-indexの値をauto(default)にさえしとけば子要素が
いくら深い位置にいても別階層の何かと比較して高さを決められるので有
用
 このheaderのナビゲーションとかもその原理で実現してる。(僕が実装し
たわけじゃないけど)
 http://www.homes.co.jp/price-
map/view/?nearby=%E6%B8%8B%E8%B0%B7

9. 正しく使おうz-index
おわり