CSS 变换父级和固定子级

Question

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

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

更详细的问题：位置固定的子元素包含在属性位置设置为相对且变换设置为非无的父元素中，该子元素使用其父容器和属性变换设置来确定固定定位，不会“突破”或按预期确定视口的固定位置。

这个问题的答案是由https://stackoverflow.com/revisions/15256339/2中的Saml指定的

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

这正是 transform 是如何根据 w3 规范工作的，它在规范中指定的 chrome 中工作。 https://www.w3.org/TR/css-transforms-1/#transform-rendering

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

Answer 1

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

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

也找到了同样的答案： 在这里-https://stackoverflow.com/revisions/15256339/2 在这里 - https://css-tricks.com/forums/topic/fixed-positioning-not-working-in-chrome/#post-188228

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

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