附录 E. 层叠上下文（Stacking Contexts）详细描述

内容

本章定义了CSS 2.1的绘制顺序，比本规范其余部分描述得更详细

E.1 定义

树序: 渲染树的先序深度遍历，在考虑会让盒移动的属性之后，对于双向内容，按逻辑（而不是视觉）顺序
元素: 在本描述中，“元素”表示实际元素，伪元素和匿名盒。在适当的位置，伪元素和匿名盒会被当作后代。例如，外部列表标记出现在行框中一个相邻的':before'盒之前，而':before'盒出现在盒的内容之前等等

E.2 绘制顺序

堆叠（stack）的底层离用户最远，堆叠的顶层离用户最近：

	     |	   |	     |	  |
	     |		|    |	  |	⇦ ☻
	     |		|	  |	user
z-index:  canvas  -1	0    1	  2

堆叠上下文的背景和最负的（z-index最小）定位的堆叠上下文位于堆叠的底部，而最正（z-index最大）定位的堆叠上下文位于堆叠的顶部

如果被包含在另一块区域中的话，画布是透明的。否则，给定一个UA定义的颜色。画布就面积而言是无限的，包含根元素。初始情况下，视口的左上角就是画布的原点

一个生成了堆叠上下文的（见'z-index'属性）元素的后代的绘制顺序为：

如果该元素是根元素：
1. 元素的背景色覆盖整个画布
2. 元素的背景图片覆盖整个画布，定位在将用来绘制根元素的原点的位置
如果该元素是一个块，list-item或者其它与块等价的东西：
1. 元素的背景色，除非它是根元素
2. 元素的背景图片，除非它是根元素
3. 元素的边框
否则，如果该元素是一个块级表格：
1. 表格背景（先颜色，后图片），除非它是根元素
2. 列组背景（先颜色，后图片）
3. 列背景（先颜色，后图片）
4. 行组背景（先颜色，后图片）
5. 行背景（先颜色，后图片）
6. 单元格背景（先颜色，后图片）
7. 所有的表格边框（对于独立边框，按树序绘制）
由具有负z-index（不包括0）的定位的后代形成的堆叠上下文按z-index顺序（最小的最先），然后按树序（绘制）
对于它的所有流内，非定位的（non-positioned），块级后代，按树序：如果该元素是一个块，list-item或者其它与块等价的东西：
1. 元素的背景色
2. 元素的背景图片
3. 元素的边框
否则，元素是表格的话：
1. 表格背景（先颜色，后图片）
2. 列组背景（先颜色，后图片）
3. 列背景（先颜色，后图片）
4. 行组背景（先颜色，后图片）
5. 行背景（先颜色，后图片）
6. 单元格背景（先颜色，后图片）
7. 所有的表格边框（对于独立边框，按树序绘制）
所有非定位的浮动后代，按树序（绘制）。对于这些后代中的每个元素，就当它创建了一个新的堆叠上下文，但所有定位的后代和那些确实创建了新的堆叠上下文的后代应该被当成父级堆叠上下文的一部分，而不是新的
如果该元素是一个生成了堆叠上下文的行内元素，那么：
1. 对于元素所在的每一个行框：
  1. 对于该行框中的元素的盒（按树序绘制），跳至7.2.1
否则：先绘制该元素，然后按树序绘制它的所有流内，非定位的，块级后代：
1. 如果该元素是一个块级替换元素，那么：绘制不可再分的（atomically）替换后的内容
2. 否则，对于该元素的每个行框：
  1. 对于行框中每个作为该元素的子级的盒，按树序（绘制）：
    1. 元素的背景色
    2. 元素的背景图片
    3. 元素的边框
    4. 对于行内元素：
      1. 对于该元素的位于该行框中的所有流内，非定位的，行内级子级，和该行框上元素内的所有文本串，按树序：
        
        如果是一串文本，那么：
        
        元素的文本的所有下划线效果，按元素应用下划线的树序（所以最深的元素的下划线，如果有的话，被绘制在最顶层，而根元素的下划线，如果有的话，被绘制在最底层）
        元素的文本的所有上划线效果，按元素应用上划线的树序（所以最深的元素的上划线，如果有的话，被绘制在最顶层，而根元素的上划线，如果有的话，被绘制在最底层）
        文本
        元素的文本的所有中划线效果，按元素应用中划线的树序（所以最深的元素的中划线，如果有的话，被绘制在最顶层，而根元素的中划线，如果有的话，被绘制在最底层）
        
        否则，对于该元素，跳至7.2.1
      对于inline-block和inline-table元素：
      1. 对于其中的每一个，就当该元素创建了一个新的堆叠上下文，但所有定位的元素和那些确实创建了新的堆叠上下文的后代应该被当成父级堆叠上下文的一部分，而不是新的
      对于行内级替换元素：
      1. 绘制不可再分的（atomically）替换后的内容
    有些盒可能已经通过行分割或者Unicode双向算法生成了
  2. 可选的，元素的轮廓（见下面的10）
3. 可选的，如果该元素是块级的，绘制该元素的轮廓（见下面的10）
所有定位的具有'z-index: auto'或者'z-index: 0'的后代，按树序（绘制）。对于那些具有'z-index: auto'的元素，就当该元素创建了一个新的堆叠上下文，但所有定位的元素和那些确实创建了新的堆叠上下文的后代应该被当成父级堆叠上下文的一部分，而不是新的。对于那些具有'z-index: 0'的元素，就当生成的堆叠上下文不可再分
由定位的具有z-index大于等于1的后代形成的堆叠上下文，按z-index顺序（最小的优先），然后按树序（绘制）
最后，在以上步骤中没有绘制轮廓的实现必须根据现阶段的堆叠上下文绘制轮廓（推荐在这一步绘制轮廓，而不要再上面的步骤中绘制）

E.3 注意

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

而双向行内元素的背景按树序绘制，它们按照视觉顺序定位。由于行内背景的定位在CSS 2.1中没有指定，因此这两种要求的确切结果是UA定义的。CSS3可能会详细定义这部分