CSS 固定位置不起作用像绝对一样工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36855473/
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 is working like absolute
提问by Luiz Mitidiero
my question is pretty simple. I'm working on a page on mobile version, and we want to keep the "snag it" yellow button fixed on bottom, but position fixed is not working, it's working like position absolute and i don't know why.
我的问题很简单。我正在处理移动版本的页面，我们希望将“snag it”黄色按钮固定在底部，但位置固定不起作用，它像绝对位置一样工作，我不知道为什么。
The page i'm working: https://www.thechivery.com/products/everything-is-j-ok-tee
我正在工作的页面：https: //www.thechivery.com/products/everything-is-j-ok-tee
Thanks, Luiz
谢谢，路易斯
回答by litel
The issue here lies with your .content-containerwrapper class, which has a CSS declaration of webkit-transform: translate3d(0,0,0). The transform declaration, as this answer illustrates, changes the positioning context from the viewport to the rotated element, which essentially means that your fixedelement behaves as if it were absolutely positioned. Here's an example showing the difference between a fixed element inside a transformed divand a fixed element outside of that div.
这里的问题在于您的.content-container包装类，它的 CSS 声明为webkit-transform: translate3d(0,0,0). 正如此答案所示，转换声明将定位上下文从视口更改为旋转元素，这实质上意味着您的fixed元素表现得好像它是绝对定位的。这是一个示例，显示了已转换内部div的固定元素与外部的固定元素之间的区别div。
.rotate {
transform: rotate(30deg);
background: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
.fixed {
position: fixed;
background: red;
padding: 10px;
color: white;
top: 50px;
}<div class="rotate">
<div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>In order for everything to work, you'll need to remove the transform3ddeclaration from .content-container.
为了让一切正常工作，您需要transform3d从.content-container.
回答by konrad
For anyone wondering if this is a browser bug. Apparently it's not and it follows current W3C specs. What's strange is at first it was just inconsistent between the browsers (in some it worked as intended) and then all of them started to follow the counter intuitive W3C rules. There seems to be no clear explanation if this is actually intended logic, a side effect of some implementation problem or just a dumb omission.
对于任何想知道这是否是浏览器错误的人。显然不是，它遵循当前的 W3C 规范。奇怪的是，起初它只是在浏览器之间不一致（在某些情况下它按预期工作），然后所有浏览器都开始遵循反直觉的 W3C 规则。如果这实际上是预期的逻辑，某些实现问题的副作用或只是一个愚蠢的遗漏，似乎没有明确的解释。
Also position: fixedgets broken not only by transformbut also by filterand perspectiveproperty put on any ancestor as explained here.
也position: fixed变得不仅打破transform，但也filter和perspective财产穿上任何始祖为解释在这里。
See: https://www.w3.org/TR/css-transforms-1/#propdef-transformand https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328and https://github.com/w3c/csswg-drafts/issues/913for more info on this issue.
请参阅：https: //www.w3.org/TR/css-transforms-1/#propdef-transform和 https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328和https:// /github.com/w3c/csswg-drafts/issues/913有关此问题的更多信息。
回答by Etienne Martin
In my case, the problem was caused by mixing a css transformwith overflow: auto;on the parent.
对我来说，这个问题是通过混合CSS造成transform与overflow: auto;父。
I created a new child element on which I moved the overflowproperty.
我创建了一个新的子元素，我在上面移动了overflow属性。
Separating the two properties fixed the issue.
分离这两个属性解决了这个问题。
回答by partypete25
It's a mobile specific issue. I have encountered this issue before. Generally speaking mobile browsers, particularly older ones, restrict the use of fixed positioning because it can take up too much room on the screen.
这是一个特定于移动设备的问题。我以前遇到过这个问题。一般来说，移动浏览器，尤其是旧浏览器，限制了固定定位的使用，因为它会在屏幕上占据太多空间。
