CSS - “位置：固定”在 Firefox 中表现得像“绝对”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21440604/
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
CSS - "position: fixed" acting like "absolute" in Firefox
提问by user2250471
I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute.
我一直在 Safari 中构建一个网站，我刚刚在 Firefox 中对其进行了测试，我的固定导航元素的行为就好像它们的位置是绝对的。
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at the end of the tags, so, for example, on a long page, I'd have to scroll down just to see it. It is acting as if it's absolute.
这是我用于主要导航包装器的 CSS（它是底部导航）。在 Webkit 中，它工作得很好：也就是说，它无论如何都粘在窗口的底部。在 firefox 中，它将自己定位在标签的末尾，因此，例如，在一个长页面上，我必须向下滚动才能看到它。它表现得好像是绝对的。
I also have a sidebar navigation.
我也有一个侧边栏导航。
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
This sidebar is also acting as if it's absolute - that is, it is positioning itself off the screen properly, but it's elongating <body>and thus the horizontal scrollbar appears. The height: 100%;is also responding to the <body>height and not the window height, so, for example, my <header>has a top margin of 20px, and the slidebar observes that margin too (the body has 0 margin). Likewise, instead of the height: 100%;ending at the bottom of the window, it ends at the bottom of the <body>, factoring in the footer's bottom margin.
这个侧边栏也表现得好像它是绝对的——也就是说，它正确地将自己定位在屏幕之外，但它正在拉长<body>，因此出现水平滚动条。的height: 100%;还响应<body>高度，而不是窗口的高度，所以，例如，我的<header>具有20像素的顶缘，和滑杆指出余量太（所述主体具有0余量）。同样，它不是height: 100%;在窗口底部结束，而是在 底部结束<body>，考虑到页脚的底部边距。
I cannot understand for the life of me why this is happening. Element inspection shows all the properties are loading fine, and in Chrome and Safari it works. It worked initially, and it worked the last time I even edited either navigation, but it has since stopped working since I built other, irrelevant, parts of the site.
我一生都无法理解为什么会发生这种情况。元素检查显示所有属性都加载良好，并且在 Chrome 和 Safari 中可以正常工作。它最初有效，上次我什至编辑任一导航时也有效，但自从我构建网站的其他不相关部分后，它就停止工作了。
http://www.upprise.com/demo.php- click the Envelope icon to see the sidebar
http://www.upprise.com/demo.php- 单击信封图标查看侧边栏
回答by user2250471
Through the process of elimination I was able to determine that having the following in my body was causing all the problems with fixed divs in Firefox:
通过消除过程，我能够确定在我的身体中有以下内容导致了 Firefox 中固定 div 的所有问题：
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
I had originally added this code to prevent flickering in certain CSS transitions throughout the site, but I guess I'll have to add it to each individual class now.
我最初添加此代码是为了防止在整个站点的某些 CSS 转换中闪烁，但我想我现在必须将它添加到每个单独的类中。
回答by Pankaj
I had the exact same problem, turns out the following CSS property of a parent element was causing the problem.
我遇到了完全相同的问题，结果是父元素的以下 CSS 属性导致了问题。
transform: translate3d(0px, 0px, 0px);
回答by Ryan Wheale
It appears that some browsers will will apply fixed positioning relative to the window, while Firefox is applying it relative to the <body />. You need to make your body100% tall:
似乎某些浏览器将应用相对于窗口的固定定位，而 Firefox 则相对于<body />. 你需要让你的body身高达到100%：
body {
height: 100%;
}
But the margin from your .header is collapsing outside of the body element. Change this:
但是 .header 的边距在 body 元素之外塌陷。改变这个：
margin: 25px auto;
to this:
对此：
margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
回答by Kevin Weber
I solved the issue by moving the element that uses position: fixed;out of its original parent element that uses transform: translateX(-50%);.
我通过将使用的元素position: fixed;移出其使用transform: translateX(-50%);.
Thus...
因此...
<div class="transformed-container">
<div="fixed-element"></div>
</div>
...became...
……变成了……
<div class="transformed-container"></div>
<div class="fixed-element"></div>
Two things led me to this conclusion:
有两件事让我得出这个结论：
- @Pankaj's answer shows that the translate value can cause an issue.
- @Wildhoney's comment to another answer references an explanation of the underlying cause: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
- @Pankaj 的回答表明翻译值可能会导致问题。
- @Wildhoney 对另一个答案的评论引用了对根本原因的解释：http: //meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
回答by Patrick
The problem seems to be in your body, i've added width:100%; height:100%; and overflow:hidden; to it in my fire fox and it looked just fine, except for the bottom menu-bar that went half of it's height over the bottom.
问题似乎出在你的身体上，我添加了 width:100%; 高度：100%；和溢出：隐藏；在我的 fire fox 中，它看起来很好，除了底部菜单栏的高度超过底部的一半。
回答by Josh Crozier
Not sure whythe browsers were rendering differently, though the solution is pretty simple. You need to give the parent elements (html/body) a height of 100%in order to fill the entire page. It seems like FF rendered the fixed elements at the bottom of the contents as opposed to the bottom of the window. Adding the following will make it work across browsers:
不知道为什么浏览器呈现不同，虽然解决方案很简单。您需要为父元素 ( html/ body) 指定高度100%以填充整个页面。FF 似乎在内容的底部渲染了固定元素，而不是在窗口的底部。添加以下内容将使其跨浏览器工作：
html, body {
height: 100%;
}
In addition, you should also use padding on .headerelement as opposed to a margin. This will solve another issue.
此外，您还应该在.header元素上使用填充而不是边距。这将解决另一个问题。
.header {
margin: 0 auto; /* use a value of 0 rather than 25px */
padding: 25px 0;
}
I tested all this in the browser, it will work in FF now. It should also render properly in Chrome and others.
我在浏览器中测试了所有这些，它现在可以在 FF 中工作。它也应该在 Chrome 和其他人中正确呈现。
回答by Beltran
I needed to remove some css classes from the superior container of the fixed-on-scrollelement that had a transition, from the animateCSS library.
我需要从 animateCSS 库中从具有过渡的固定滚动元素的高级容器中删除一些 css 类。
$(window).on('scroll', function () {
if (distance <= 65) {
$('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
});
Maybe it helps
也许它有帮助
