在静态元素上设置 z-index，在 Firefox 和 Chrome 中使用变换，不同的行为

Question

关于z-index 和兄弟之间的堆叠顺序 - 根据定义，只有定位（具有position 而不是static）元素服从z-index 值。已定位的元素将始终出现在未定位的上方。

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

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

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

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

编辑：设置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 中从不一种场景，其中非定位元素可以建立堆叠上下文（根元素除外）——有 @987654322 @，不过都是 CSS3。

就其价值而言，Firefox 是唯一一种行为方式与其相同的浏览器。 dholbert 在this bug report 中建议 Firefox 的行为是错误的，基于转换后的元素 not 也是定位元素的解释。至少，修复 Firefox 的行为会导致所有浏览器之间的互操作——此时规范应该（我非正式地说）相应地修改。