css - 在静态元素上设置 z-index，在 Firefox 和 Chrome 中进行转换，行为不同

Question

关于 z-index 和 sibling 之间的堆叠顺序 - 根据定义只有 positioned (具有 position 而不是 static ) 元素服从 z-index 值。定位元素将始终出现在未定位元素之上。

但是，在未定位的元素上设置 transform 和 z-index 会显示奇怪的结果，这在 Chrome 和 Firefox 上是不同的。

这里有 3 个未定位的 div:https://jsfiddle.net/mz29Luwo/
它们按照它们的顺序堆叠(这是正常的)。

现在它们在这里，在第二个(粉红色)div 上设置了 transform 和 z-index -1:https://jsfiddle.net/mz29Luwo/1/
在 Chrome 中它不会改变任何东西，但在 Firefox(49.0，Ubuntu)中 - 它使第二个(粉红色)div 出现在第一个(黄色)下方 - 只要其 z-index 设置为一个负值(哪个无关紧要)。如果您还在第 3 个 div 上设置 transform，也会发生类似的效果。

为什么会这样？
哪个浏览器显示正确的行为？
是否有任何其他属性(不是 position)会导致类似的事情？
这与“the stacking context”有关吗？我认为它不应该 - 创建一个新的堆叠上下文适用于元素的子元素，但这是与其 sibling 相关的东西......
其中一个浏览器是否存在错误？

编辑:放置 transform 也会使 div 出现在其他 div 之上 - 然而如前所述 - 更改其 z-index 不会在 Chrome 中做任何进一步的事情，并且在 Firefox 中，负 z-index 会起作用。

Answer 1

css-transforms 表示具有转换的元素建立 "both a stacking context and a containing block" ，但它没有说明该元素是否是定位元素(至少对于 z-index 而言)。 CSS2.1 没有区分，因为在 CSS2.1 中从不没有定位元素可以建立堆叠上下文的场景(根元素除外)——有 a variety of other properties that can result in the creation of a stacking context ，但它们都是 CSS3。

就其值(value)而言，Firefox 是唯一一款以其行为方式运行的浏览器。 dholbert 在 this bug report 中暗示 Firefox 的行为是错误的，基于转换元素不也是定位元素的解释。至少，修复 Firefox 的行为会导致跨所有浏览器的互操作——此时规范应该(我非正式地说)进行相应的修改。