前言
出于为了更好的理解CSS层叠上下文的相关概念，我把CSS规范的z-index部分进行了翻译。由于英文水平有限，如有翻译不妥之处，还请斧正。原文地址
译文
9.9.1 指定层叠水平：“z-index”属性
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
对于定位元素，z-index属性意义:
- 指定在当前层叠上下文中，盒模型元素的层叠水平。
- 这个盒模型元素是否要创建层叠上下文。
取值含义:
- 整数：在当前层叠上下文中，指定盒模型元素的层叠水平为该数值。同时盒模型元素还会创建一个新的层叠上下文。
- auto：在当前层叠上下文中，指定盒模型元素的层叠水平为0。除非盒模型元素是根元素，否则它不会建立新的层叠上下文。
在下面描述中，“从后到前”的含义：当用户面对屏幕时，越前面的离用户更近，越后面的有可能被前面的挡住。
在CSS2.1规范中，每个盒模型元素在三维空间中都有一个位置。除了水平和垂直位置之外，这些盒模型元素还会沿着“z轴”进行放置，并在一个盒模型元素上对另一个盒模型元素进行格式化。当盒模型元素之间在视觉上重叠时，z轴位置就特别重要。本节将讨论如何沿着z轴放置这些盒模型元素。
渲染树绘制到画布上的顺序，是根据在层叠上下文中的位置来决定的。层叠上下文本身是可以包含其他层叠上下文的。从父层叠上下文的角度看，一个层叠上下文又是原子性的。也就是说，同一个层叠上下文，不可能同时存在多个父层叠上下文。
每个盒模型元素都属于一个层叠上下文。在给定的层叠上下文中，每个定位的盒模型元素都有一个整数的层叠水平，这是它在z轴上的位置，相对于相同层叠上下文中的其他层叠水平。具有较大层叠水平的盒模型元素，会比较低层叠水平的盒模型元素先进行格式化。盒模型元素也可以有负的层叠水平。在层叠上下文中，具有相同堆叠层级的盒模型元素，会依照文档树中的后来者居上的原则，进行从后到前堆叠。
根元素构成了根层叠上下文，而其他层叠上下文，则由拥有zIndex（值不为auto）、且定位的盒模型元素构成。层叠上下文不一定与包含块相关。在未来的CSS级别中，其他属性可能会引入叠加上下文，例如“透明度”。
在每个层叠上下文中，以下各层会按照从后到前进行绘制：
- 构成层叠上下文元素的背景和边框
- 具有负层叠水平的子层叠上下文（值最小的放越后面）
- 没有脱离文档流、且非定位的后代非内联盒模型元素
- 非定位的浮动盒模型元素
- 没有脱离文档流、且非定位的后代内联盒模型元素，包括内联table和内联block
- 层叠水平为0的子层叠上下文、层叠水平为0的定位子层叠上下文
- 具有正层叠水平的子层叠上下文（值最大的放越前面）
这个绘制顺序会递归地应用于每个层叠上下文中。这一层叠上下文绘画顺序的描述构成了附录E中详细规范定义的概述。
