小编ali*_*ers的帖子

CSS 转换父级和固定子级

我希望这些信息可以帮助在 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

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

css 3d blogs google-chrome fixed

6
推荐指数
1
解决办法
2581
查看次数

标签 统计

3d ×1

blogs ×1

css ×1

fixed ×1

google-chrome ×1