CSS 转换父级和固定子级

Question

我希望这些信息可以帮助在 Chrome 浏览器中使用主题、3D、变换、滑块、动画的项目时遇到“位置：固定”问题的其他人。

问题：以固定位置定位的元素：没有出现在正确的位置，不会爆发，并被锁定在父容器中。

更详细的问题：位置固定的子元素由父元素包含，其属性位置设置为相对并将变换设置为除无以外的任何内容，该子元素使用其父容器并设置属性变换来确定固定位置和不会像预期的那样“爆发”或确定视口的固定位置。

答案由：https ://stackoverflow.com/revisions/15256339/2中的Saml指定

此问题似乎是由于设置了 CSS 变换属性引起的。CSS 变换为该元素的子元素将用于定位的元素创建一个新的局部坐标系。这会导致任何具有 position:fixed 的元素固定到最后一个具有 transform 不等于 none 的元素。

这正是根据 w3 规范假设转换的工作方式，并且它在规范中指定的 chrome 中工作。https://www.w3.org/TR/css-transforms-1/#transform-rendering

这不是错误，您需要删除转换属性或将元素移动到转换元素之外。

Answer 1

我没有一个解决方案可以让您从具有 css 属性转换集的父元素中分离出子元素。请参考下面的解决方法来取消父级上的转换设置，直到找到更好的解决方案。

通过将变换设置为无来突破子项的解决方案：（如果您需要父项具有变换集，则不起作用）

在捕获子元素的父元素上设置以下属性。这是根据 w3c 规范设计的（请参阅上面的链接），它不会影响 FF。
-webkit-transform：无！重要；变换：无！重要；

确保您也将父容器设置为相对位置。