不透明度值小于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章）。