Webページが表示されるまで 9

第9章：ペイント (Paint) - ピクセルの生成

位置とサイズが決まったら、要素を実際に「塗る」作業に入ります。これを ペイント（Paint） と呼びます。しかし、ここでいきなり画面のピクセルを操作するわけではありません。

9.1 ペイントレコードとDisplay List

ブラウザはレンダーツリーを走査し、描画命令のリスト（Paint Records / Display List） を作成します。

これは「座標(10, 10)から幅100pxの四角を描く」「背景色を赤にする」「テキストを描画する」といった、グラフィックエンジン（ChromiumならSkia）への命令セットです。

9.2 重ね合わせ順序 (Stacking Context)

ペイントの順序は重要です。単にDOMの順番通りに描くと、z-index や position プロパティによる重なりが正しく表現されません。ブラウザは スタッキングコンテキスト（Stacking Context） のルールに従い、以下の順序で描画命令を並べ替えます。

1. 背景とボーダー
2. z-index が負の子要素
3. ブロックレベルの要素
4. フロート要素
5. インライン要素（テキストなど）
6. z-index が0または指定なしの配置要素（positioned elements）
7. z-index が正の子要素