付録E. スタッキングコンテキストの詳細な説明

この章は、CSS 2.2の描画順序について、仕様書の他の部分で説明されている以上に詳細に定義しています。

E.1 定義

ツリー順序

レンダリングツリーの、ボックスを移動させるプロパティを考慮した後の、論理的（ビジュアルではない）順序での前順深さ優先探索。

要素

この説明において、「要素」とは実際の要素、疑似要素、および匿名ボックスを指します。疑似要素および匿名ボックスは適切な位置で子孫として扱われます。例えば、外側のリストマーカーはラインボックス内で隣接する ':before' ボックスの前にあり、その後にそのボックスの内容が続きます。

E.2 描画順序

スタックの底はユーザーから最も遠く、スタックの上はユーザーに最も近い位置にあります:

	     |	   |	     |	  |
	     |		|    |	  |	⇦ ☻
	     |		|	  |	ユーザー
z-index:  canvas  -1	0    1	  2

スタッキングコンテキストの背景と最も負の位置にあるスタッキングコンテキストはスタックの底にあり、最も正の位置にあるスタッキングコンテキストはスタックの上にあります。

キャンバスは、別のものに含まれている場合は透明で、含まれていない場合はUAによって定義された色を持ちます。それは無限の広がりを持ち、ルート要素を含みます。初期状態では、ビューポートはその左上隅がキャンバスの原点に固定されています。

スタッキングコンテキストを生成する要素の子孫の描画順序（'z-index' プロパティを参照）は次の通りです:

1. 要素がルート要素である場合:

   1. 要素の背景色がキャンバス全体にわたって適用されます。
   2. 要素の背景画像がキャンバス全体にわたって適用され、ルート要素のために描画される場合に使用される原点で固定されます。

2. 要素がブロック、リストアイテム、またはその他のブロック等価物である場合:

   1. 要素がルート要素でない場合、その背景色。
   2. 要素がルート要素でない場合、その背景画像。
   3. 要素のボーダー。

   それ以外の場合、要素がブロックレベルのテーブルである場合:

   1. 要素がルート要素でない場合、テーブル背景（色、その後に画像）。
   2. カラムグループの背景（色、その後に画像）。
   3. カラムの背景（色、その後に画像）。
   4. 行グループの背景（色、その後に画像）。
   5. 行の背景（色、その後に画像）。
   6. セルの背景（色、その後に画像）。
   7. すべてのテーブルボーダー（分離されたボーダーの場合はツリー順）。

3. 負のz-index（0を除く）を持つ位置指定された子孫によって形成されるスタッキングコンテキストを、z-indexの順（最も負のものから順番に）で、その後ツリー順で描画。

4. ツリー順における、すべてのインフローで位置指定されていないブロックレベルの子孫について: 要素がブロック、リストアイテム、またはその他のブロック等価物である場合:

   1. 要素の背景色。
   2. 要素の背景画像。
   3. 要素のボーダー。

   それ以外の場合、要素がテーブルである場合:

   1. テーブル背景（色、その後に画像）。
   2. カラムグループの背景（色、その後に画像）。
   3. カラムの背景（色、その後に画像）。
   4. 行グループの背景（色、その後に画像）。
   5. 行の背景（色、その後に画像）。
   6. セルの背景（色、その後に画像）。
   7. すべてのテーブルボーダー（分離されたボーダーの場合はツリー順）。

5. すべての位置指定されていない浮遊子孫をツリー順で描画。それぞれについて、その要素が新たなスタッキングコンテキストを作成したかのように扱いますが、位置指定された子孫および実際に新しいスタッキングコンテキストを作成する子孫は、この新しいものではなく親スタッキングコンテキストの一部と見なされるべきです。

6. 要素がスタッキングコンテキストを生成するインライン要素である場合:

   1. 要素が含まれる各ラインボックスについて:

      1. そのラインボックスにおける要素のボックス（ツリー順）については、7.2.1 にジャンプ。

7. それ以外の場合: 最初に要素について、その後ツリー順におけるすべてのインフローで位置指定されていないブロックレベルの子孫について:

   1. 要素がブロックレベルの置換要素である場合、置換コンテンツを一括して描画。

   2. それ以外の場合、その要素の各ラインボックスについて:

      1. そのラインボックス内で、その要素の子である各ボックスについてツリー順で描画:

         1. 要素の背景色。

         2. 要素の背景画像。

         3. 要素のボーダー。

         4. インライン要素の場合:

            1. その要素のすべてのインフローで位置指定されていないインラインレベルの子がこのラインボックス内にある場合、またその要素内のこのラインボックス上にあるすべてのテキストのランについてツリー順で描画:

               1. これがテキストランである場合:

                  1. その要素のテキストに影響を与えるすべての下線を、下線を適用する要素のツリー順（最も深い要素の下線が最上部に描画され、ルート要素の下線が最下部に描画されるように）で描画。
                  2. その要素のテキストに影響を与えるすべての上線を、上線を適用する要素のツリー順（最も深い要素の上線が最上部に描画され、ルート要素の上線が最下部に描画されるように）で描画。
                  3. テキスト。
                  4. その要素のテキストに影響を与えるすべての打ち消し線を、打ち消し線を適用する要素のツリー順（最も深い要素の打ち消し線が最上部に描画され、ルート要素の打ち消し線が最下部に描画されるように）で描画。

               2. それ以外の場合、その要素について 7.2.1 にジャンプ。

            インラインブロックおよびインラインテーブル要素について:

            1. それぞれについて、その要素が新たなスタッキングコンテキストを作成したかのように扱いますが、位置指定された子孫および実際に新しいスタッキングコンテキストを作成する子孫は、この新しいものではなく親スタッキングコンテキストの一部と見なされるべきです。

            インラインレベルの置換要素について:

            1. 置換コンテンツを一括して描画。

         一部のボックスはライン分割やUnicodeの双方向アルゴリズムによって生成された可能性があります。

      2. オプションで、その要素のアウトライン（10 以下を参照）を描画。

   3. オプションで、要素がブロックレベルである場合、その要素のアウトライン（10 以下を参照）を描画。

8. すべての 'z-index: auto' または 'z-index: 0' を持つ位置指定された子孫をツリー順で描画。'z-index: auto' を持つものについては、その要素が新たなスタッキングコンテキストを作成したかのように扱いますが、位置指定された子孫および実際に新しいスタッキングコンテキストを作成する子孫は、この新しいものではなく親スタッキングコンテキストの一部と見なされるべきです。'z-index: 0' を持つものについては、生成されたスタッキングコンテキストを一括して処理。

9. z-indexが1以上の値を持つ位置指定された子孫によって形成されるスタッキングコンテキストを、z-indexの順（最小から順）で、その後ツリー順で描画。

10. 最後に、上記の手順でアウトラインを描画しなかった実装は、この段階でこのスタッキングコンテキストからアウトラインを描画しなければならない。（このステップでアウトラインを描画し、上記の手順では描画しないことを推奨する。）

E.3 注意事項

ルート要素の背景は、キャンバス全体にわたって一度だけ描画されます。

双方向インラインの背景はツリー順で描画されますが、それらはビジュアル順で配置されます。インライン背景の配置はCSS 2.2では指定されていないため、これらの2つの要件の正確な結果はUAによって定義されます。CSS3ではこれがさらに詳細に定義される可能性があります。