【读CSS规范】关于Z-INDEX

Question

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

加黑那句该如何翻译和理解？

Answer 1

需要层叠的元素是指那些z-index不为auto的元素(auto和0是不完全一样，根元素一定会生成一个层叠环境)，一个需要层叠的元素会生成一个层叠环境，一个元素（准确说是层叠环境）把其中需要层叠元素（层叠环境）作为一个整体决定其前后关系。

<p style="z-index:0">
    <a style="z-index:20"></a>
    <b style="z-index:10">
     <b1 style="z-index:0"></b1>
     <b2 style="z-index:30"></b2>
    </b>
</p>

p把a b分别作为一个整体决定其前后关系。根据a b 的z-index,要么a在整个b元素的前面，要么在后面，而(黑体文字的意思是)a不会出现在b1 b2 之间。

对于b中的两个元素来说，a就是在其他层叠环境中的(other stacking contexts),他不应该出现在b1和b2之间。这是因为b的z-index不为auto，所以b作为一个需要层叠的元素会生成新的一级层叠环境，他作为一个整体决定和 a的前后关系。因此，a不会出现在b1 b2之间。

如果b的z-index为 auto，则b不生成层叠环境，这时a b1 b2 实在同一个层叠环境中，a可以在b1 b2之间

Answer 2

翻译: 位于其他层叠上下文中的盒子不可能同其任何子盒为邻.

理解: 分号前面那半句讲的是, 一个层叠上下文, 即便它包含了子级的层叠上下文, 但是对它的父级而言, 它应当作为一个单一整体而看待. 例如层叠上下文 A1 有某个子层叠上下文 A2, 并且 A2 还包含了 A3, A4 等, 但对于 A1 而言, 不管 A3, A4 如何, A1 只看 A2, 而无需关心 A2 内部状况. 加粗的这段则是表明, 层叠上下文之间只有包含关系(父子)和前后关系(同胞), 没有交叉关系. 比如另一个层叠上下文 B2, A2 为其子盒 a5 建立了层叠上下文, a5 就只能从属于 A2, 不可能跑到 B2 的层叠上下文里面去.

补充:
不能把元素之间的关系同层叠上下文之间的关系等同起来. 定位元素如果没有设置 z-index 值则不会创建层叠上下文. 所以, 如下情况里, a 在 r 所创建的层叠上下文中, 并且位于 b1 b2 之间.

<div id="r" style="position: relative; z-index: 1">
    <div id="a" style="position: relative; z-index: 1"></div>
    <!-- `b`虽然是定位元素但没有`z-index` -->
    <div id="b" style="position: relative">
        <div id="b1" style="position: relative; z-index: 2"></div>
        <div id="b2" style="position: relative; z-index: 0"></div>
    </div>
</div>

Answer 3

从父级层叠上下文的角度看，一个层叠上下文是不可分的；在其它层叠上下文中的盒子不会出现在它的任意盒子中。