不透明度值小于 1 并且没有 z-index 堆叠

Question

MDN - Stacking without z-index 表示当页面中没有元素具有 z-index 时，元素按此顺序堆叠：

1. 根元素的背景和边框
2. 正常流程中的后代块，按出现顺序（在 HTML 中）
3. 后代定位元素，按出现顺序（在 HTML 中）

但当涉及不透明度小于 1 的元素时，情况似乎并非如此：

http://jsfiddle.net/pbQfY/2/

假设真正的顺序如下是否安全？

1. 根元素的背景和边框
2. 正常流程中的后代块，按出现顺序（在 HTML 中）
3. 后代定位元素和创建堆叠上下文的后代元素，按出现顺序（在 HTML 中）

Answer 1

看起来那篇 MDN 文章只是 actual stacking contexts explanation 的基本版本，visual formatting module 中也提到了它。然而，这个特殊的陷阱来自CSS color module（强调我的）：

由于不透明度小于 1 的元素是由单个元素合成的 离屏图像，其外部的内容不能按 z 顺序分层 在它里面的内容之间。出于同样的原因， 实现必须为任何元素创建一个新的堆叠上下文 不透明度小于 1。如果不透明度小于 1 的元素是 未定位，实现必须绘制它创建的层， 在其父堆叠上下文中，以相同的堆叠顺序 如果它是具有“z-index：0”的定位元素并且 'opacity: 1'. 如果定位不透明度小于 1 的元素， 'z-index' 属性的应用如 [CSS21] 中所述，除了 “auto”被视为“0”，因为新的堆栈上下文总是 创建的。更多信息请参见 [CSS21] 的第 9.9 节和附录 E 有关堆叠上下文的信息。本段中的规则不 适用于 SVG 元素，因为 SVG 有自己的渲染模型（[SVG11]， 第 3 章）。