附录 E. 堆叠上下文的详细描述

本章定义了 CSS 2.2 中绘制顺序的详细内容，超出了规范其余部分的描述。

E.1 定义

树顺序

对渲染树的深度优先前序遍历，以逻辑顺序（而非视觉顺序）遍历双向内容，并考虑到移动框的属性。

元素

在此描述中，“元素”指的是实际元素、伪元素和匿名框。伪元素和匿名框在适当的位置被视为后代。例如，外部列表标记位于行框中相邻的“:before”框之前，而后者位于框内容之前，依此类推。

E.2 绘制顺序

堆栈底部离用户最远，堆栈顶部离用户最近：

	     |	   |	     |	  |
	     |		|    |	  |	⇦ ☻
	     |		|	  |	用户
z-index:  画布  -1	0    1	  2

堆叠上下文背景和负 z-index 的堆叠上下文位于堆栈底部，而正 z-index 的堆叠上下文位于堆栈顶部。

如果画布包含在另一个画布中，则画布是透明的；如果没有，则由 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 顺序排列由定位后代形成的堆叠上下文，z-index 大于或等于 1 的按树顺序排列（从最小开始）。

10. 最后，在上述步骤中未绘制轮廓的实现必须在此阶段从该堆叠上下文中绘制轮廓。（建议在此步骤中绘制轮廓，而不是在上述步骤中绘制。）

E.3 备注

根元素的背景只绘制一次，覆盖整个画布。

虽然双向内联元素的背景按树顺序绘制，但它们的位置是按视觉顺序排列的。由于 CSS 2.2 中未指定内联背景的位置，因此这两个要求的确切结果由 UA 定义。CSS3 可能会对此进行更详细的定义。