CSS 位置：固定在谷歌浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20503424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position:fixed not working in Google Chrome
提问by Dln
I am having some trouble with a 'fixed' element in Google Chrome. The element behaves as it should in other major browsers.
我在使用 Google Chrome 中的“固定”元素时遇到了一些问题。该元素的行为与其他主要浏览器中的一样。
Here is the CSS:
这是CSS：
#element {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
z-index: 10;
}
The issue is, when the page loads, the element is fixed at the bottom of the viewport, as it should be. Upon scrolling, it remains at the same spot where it was when the page loaded - it doesn't stay fixed to the bottom of the screen.
问题是，当页面加载时，元素固定在视口的底部，这应该是。滚动时，它会保持在页面加载时所在的位置——它不会固定在屏幕底部。
回答by scooterlord
try adding the following code to your element:
尝试将以下代码添加到您的元素中：
-webkit-transform: translateZ(0);
回答by Gavin Lovegrove
I had a property: -webkit-perspective:800;on the body tag. I removed this and the fixed positioning started working again... obscure, but worth a look.
我有一个属性：-webkit-perspective:800;在 body 标签上。我删除了它，固定定位再次开始工作......晦涩，但值得一看。
回答by Dima Litvinov
As an addition to the won answer: this would not workif you have "-webkit-transform-style: preserve-3d"in one of the parent elements. I don't know why, I just had such and removed it.
作为获胜答案的补充：如果您在父元素之一中有“-webkit-transform-style：preserve-3d”，这将不起作用。我不知道为什么，我刚刚有这样的并删除了它。
回答by Marcin Rapacz
I had to disable:
我不得不禁用：
-webkit-transform: none !important;
transform: none !important;
to make it for me.
为我做。
回答by Robin Morris
I had to put a left position too for this to appear...not just a top:
我也不得不放一个左边的位置才能出现这个......不仅仅是一个顶部：
{
left: 0px;
}
回答by tariksoypt
None of this answers worked for me. What worked for me is setting the containproperty of the parent element to none
这些答案都不适合我。对我有用的是将父元素的包含属性设置为无
{
contain:none !important;
}回答by alex351
I used position: sticky; bottom: 0;for now.
我暂时用position: sticky; bottom: 0;了。
#element {
position: sticky; <---
bottom: 0px;
width: 100%;
height: 50px;
z-index: 10;
}
回答by remidej
To complete what the other answers are saying, also be aware that setting the will-changeproperty on any parent element will break fixed positioning.
要完成其他答案的说明，还要注意will-change在任何父元素上设置属性都会破坏固定定位。
回答by Pavel Maximov
First check if any parent have
首先检查是否有父母有
-webkit-transform: translateZ(...);
or
或者
transform: translateZ(...);
or
或者
-webkit-transform: translate3d(...)
or
或者
transform: translate3d(...)
and try removing them.
并尝试删除它们。
If still doesn't work try adding
如果仍然不起作用，请尝试添加
-webkit-transform: translateZ(0);
or
或者
transform: translateZ(0);
to your element.
到你的元素。
If still doesn't work check for other -webkit-transform / transform / perspective styles on parents and remove them.
如果仍然不起作用，请检查父项上的其他 -webkit-transform/transform/perspective 样式并删除它们。
回答by zookd
I fixed it by removing
我通过删除来修复它
filter: blur(0);
in the parent element. I only had this issue with chrome, it was working well with Safari.
在父元素中。我只有 chrome 有这个问题，它在 Safari 上运行良好。
