位置：固定在谷歌浏览器中不起作用答案

【问题标题】：position:fixed not working in Google Chrome位置：固定在谷歌浏览器中不起作用
【发布时间】：2013-12-28 11:57:50
【问题描述】：

我在使用 Google Chrome 中的“固定”元素时遇到了一些问题。该元素的行为与其他主流浏览器中的行为一样。

这是 CSS：

#element { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 10;
}

问题是，当页面加载时，元素被固定在视口的底部，这是应该的。滚动时，它会保持在页面加载时的相同位置 - 它不会固定在屏幕底部。

【问题讨论】：

您的问题一定有更多问题，因为它无法使用 chrome 上的 CSS 规则重现，即。 jsbin.com/UcIpANol/1 在 Chrome 上运行良好。
你能不能加个JSFiddle

标签： css google-chrome css-position

【解决方案1】：

尝试将以下代码添加到您的元素：

-webkit-transform: translateZ(0);

【讨论】：

很高兴我能帮上忙。设计多设备/浏览器的东西我几乎吃了我的眼睛......编辑：如果它有帮助，接受是正确的答案，它也可能对其他人有帮助
这对我来说更糟：比较 jsfiddle.net/Supuhstar/t04nh943 和 jsfiddle.net/Supuhstar/t04nh943/2
也尝试删除相关元素。可能很难更换，但总有办法
这很好用——对我来说，我固定位置的元素实际上确实移动了，但它在滚动时由于某种原因变得不可见，如果你点击它的位置，它有时会变得可见在那个地方和它之前加载的地方，所以它也适用于这样的问题 - 谢谢！
看着您的回答，让我查看了我的 transform: translate3d(0,0,0); 并将其从父元素中删除。使用它时，只是使我的子元素成为静态而不是固定的。 - 谢谢。

【解决方案2】：

我在 body 标签上有一个属性：-webkit-perspective:800;。我删除了这个，固定定位又开始工作了……晦涩难懂，但值得一看。

【讨论】：

如果我删除了透视属性，它也适用于我，但我需要它来获得视差效果......这很糟糕。

【解决方案3】：

作为获胜答案的补充：如果您在其中一个父元素中有 "-webkit-transform-style: preserve-3d"，这将不起作用 .我不知道为什么，我只是有这样的并删除了它。

【讨论】：

【解决方案4】：

我不得不禁用：

-webkit-transform: none !important;
transform: none !important;

为我做。

【讨论】：

【解决方案5】：

我也必须把它放在一个左边的位置才能出现......不仅仅是一个顶部：

{
    left: 0px;
}

【讨论】：

【解决方案6】：

这些答案都不适合我。对我有用的是将父元素的 contain 属性设置为 none

{
  contain:none !important;
}

【讨论】：

【解决方案7】：

我现在使用position: sticky; bottom: 0;。

#element { 
   position: sticky; <--- 
   bottom: 0px; 
   width: 100%; 
   height: 50px; 
   z-index: 10;
}

【讨论】：

【解决方案8】：

要完成其他答案的内容，还要注意在任何父元素上设置 will-change 属性会破坏固定定位。

【讨论】：

这应该是一条评论。

【解决方案9】：

首先检查是否有父母有

-webkit-transform: translateZ(...);

或

transform: translateZ(...);

或

-webkit-transform: translate3d(...)

或

transform: translate3d(...)

并尝试删除它们。

如果还是不行试试添加

-webkit-transform: translateZ(0);

或

transform: translateZ(0);

到你的元素。

如果仍然不起作用，请检查父级上的其他 -webkit-transform / transform / perspective 样式并将其删除。

【讨论】：

【解决方案10】：

我通过删除修复了它

filter: blur(0);

在父元素中。我只在 chrome 上遇到过这个问题，它在 Safari 上运行良好。

【讨论】：

【解决方案11】：

will-change:transform; 属性导致了我的问题。只需添加will-change:auto; 即可覆盖它。

【讨论】：

【解决方案12】：

尝试使用

contain: none;

在父元素中。

【讨论】：