CSS 变换父项和固定子项

Question

我希望这些信息可以帮助其他在 Chrome 浏览器中处理使用主题、3D、变换、 slider 、动画的元素时遇到“位置:固定”问题的人。

问题:以固定位置定位的元素:未出现在正确的位置，不会脱离，并被锁定到父容器中。

更详细的问题:位置固定的子元素由属性位置设置为relative且transform设置为除none之外的任何值的父元素包含，该子元素使用其属性transform设置的父容器来确定固定定位，不会“突破”或按预期确定视口(viewport)的固定位置。

这个问题的答案由: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 属性转换集的父元素中分离出子元素。请引用下面的解决方法来取消父级上的转换设置，直到找到更好的解决方案。

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

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

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

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