MDN - Stacking without z-index声明当页面中没有元素具有 z-index 时，元素按以下顺序堆叠：
- 根元素的背景和边框
- 正常流程中的后代块，按出现顺序（在 HTML 中）
- 后代定位元素，按出现顺序（在 HTML 中）
但是，当涉及不透明度小于 1 的元素时，情况似乎并非如此：
假设真正的顺序如下是否安全？
- 根元素的背景和边框
- 正常流程中的后代块，按出现顺序（在 HTML 中）
- 后代定位元素和创建堆叠上下文的后代元素，按出现顺序（在 HTML 中）
问问题
367 次
1 回答
4
看起来 MDN 文章只是实际堆叠上下文解释的基本版本，在可视化格式化模块中也涉及到。然而，这个特殊的陷阱来自CSS 颜色模块（强调我的）：
由于不透明度小于 1 的元素是由单个屏幕外图像合成的，因此其外部的内容无法在其内部的内容块之间按 z 顺序分层。出于同样的原因，实现必须为不透明度小于 1 的任何元素创建新的堆叠上下文。如果未定位不透明度小于 1 的元素，则实现必须在其父堆叠上下文中同时绘制它创建的层如果它是具有“z-index：0”和“不透明度：1”的定位元素，将使用的堆叠顺序。如果定位了不透明度小于 1 的元素，则应用“z-index”属性，如 [CSS21] 中所述，除了“auto”被视为“0”，因为总是创建新的堆叠上下文。有关堆叠上下文的更多信息，请参见 [CSS21] 的第 9.9 节和附录 E。本段中的规则不适用于 SVG 元素，因为 SVG 有自己的渲染模型（[SVG11]，第 3 章）。
于 2012-07-30T20:54:58.080 回答