为什么我的固定定位不再有效？

Question

我在固定定位和 3d 变换方面遇到问题，当元素的父元素应用透视图和 preserve-3d 时，元素似乎不遵守定位和其他属性：

.perspective {
    transform-style: preserve-3d;
    perspective: 600px;
}

目前在 Chrome 和 IE11 中的结果不同。我这里有一个简单的测试用例：http://jsfiddle.net/brdvnaf8/

当我移除透视图时，定位工作正常。当我将透视应用到所有子节点的 .parent 元素时，定位工作正常。当我只对一个子节点应用透视时，它就不行了。

谁能解释一下这对单独包装的子节点如何起作用（或不起作用）？

Answer 1

我在linux机器上，所以我没有IE11浏览器来测试，但我想我知道问题出在哪里。如果 Chrome 和 IE11 的行为与我认为的不同，这是其中之一的错误。我在 Chrome 上测试过，一切正常。它符合 W3C 规范。

那么问题在哪里呢？某些 CSS 转换属性 导致创建 包含块 ，即使对于 固定定位元素 . 所以要注意这一点。

这里有一些 CSS propery/value 对，甚至为固定定位的元素 创建包含块：

will-change: transform;

transform: auto

以外的任意值

视角： 零以外的任何值(0)

变换样式：保留 3d

我认为还有一些，但我没有时间深入查阅规范。所以这就是我认为的问题。

这里有一些关于这个东西的博客文章：

Un-fixing Fixed Elements with CSS Transforms

Why does my fixed positioning no longer work?