在 -webkit-translate 之后，CSS 修复了 Chrome 中的定位中断

Posted 2023-02-25

【中文标题】在 -webkit-translate 之后，CSS 修复了 Chrome 中的定位中断

【英文标题】：CSS fixed positioning breaks in Chrome after -webkit-translate

【发布时间】：2013-04-30 09:52:18

【问题描述】：

我正在创建一个基于响应式网页设计的网页。所以当它调整到更小的分辨率时，导航菜单将从顶部栏中移除，并变成 iPhone Facebook/Path 风格的移动滑动菜单。我已经使用this 库实现了它。

同时我在底部有一个固定的定位面板，可以上下拉动，停靠在页面底部。和this很接近，只是我的在底部，可以拉起来。

这是 Chrome 中的问题：当我滑出移动菜单并滑回时（它使用“-webkit-transform: translateX()”），固定定位的面板会破坏其位置。

经过一番研究，似乎是a bug in Chrome。 但是，有解决方法吗？

可能重复：Positions fixed doesn't work when using -webkit-transform（虽然我在答案中没有找到任何解决我的问题的方法）

非常感谢！

【参考方案1】：

你可以跟着这个小提琴

http://jsfiddle.net/stefanoortisi/DvZn2/1/

它真的很干净和简单。您可以开始遵循相同的结构。

注意：由于某种原因，固定元素需要有一个 z-index：

#topbar
    position: fixed
    z-index: 1