CSS - “位置：固定”在 Firefox 中表现得像“绝对”答案

【问题标题】：CSS - "position: fixed" acting like "absolute" in FirefoxCSS - “位置：固定”在 Firefox 中表现得像“绝对”
【发布时间】：2014-02-21 19:38:08
【问题描述】：

我一直在 Safari 中构建一个网站，我刚刚在 Firefox 中对其进行了测试，我的固定导航元素表现得好像它们的位置是绝对的。

#navigation {
    display: block;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    text-align: center;
    z-index: 99000;
}

这是我用于主要导航包装的 CSS（它是底部导航）。在 Webkit 中，它完美地工作：也就是说，它无论如何都粘在窗口的底部。在 Firefox 中，它将自己定位在标签的末尾，因此，例如，在长页面上，我必须向下滚动才能看到它。它表现得好像它是绝对的。

我还有一个侧边栏导航。

.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;
}

这个侧边栏也表现得好像它是绝对的——也就是说，它正确地将自己定位在屏幕之外，但它正在拉长<body>，因此出现了水平滚动条。 height: 100%; 也响应 <body> 高度而不是窗口高度，因此，例如，我的 <header> 的上边距为 20px，滑动条也观察到该边距（主体的边距为 0）。同样，height: 100%; 不是在窗口底部结束，而是在 <body> 的底部结束，将页脚的底部边距考虑在内。

我这辈子都无法理解为什么会这样。元素检查显示所有属性都加载正常，并且在 Chrome 和 Safari 中可以正常工作。它最初可以正常工作，并且在我最后一次编辑导航时也可以正常工作，但是自从我构建了网站的其他不相关部分后，它就停止了工作。

http://www.upprise.com/demo.php - 点击信封图标查看侧边栏

【问题讨论】：

你能提供一个例子来证明这一点吗？这对解决您的问题非常有帮助
upprise.com/demo.php@JoshC

标签： css firefox css-position

【解决方案1】：

我遇到了完全相同的问题，原来是父元素的以下 CSS 属性导致了问题。

transform: translate3d(0px, 0px, 0px);

【讨论】：

转换 + 位置：固定 = 坏事。 (Source)
只是补充一点，'perspective' 属性也会触发这个错误。很烦人。

【解决方案2】：

通过消除过程，我能够确定我体内的以下内容导致了 Firefox 中固定 div 的所有问题：

-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

我最初添加此代码是为了防止整个网站的某些 CSS 过渡出现闪烁，但我想我现在必须将它添加到每个单独的类中。

【讨论】：

我不敢相信我花了两天时间才发现这个。感谢发帖！
这里是相关的 Firefox 错误报告：bugzilla.mozilla.org/show_bug.cgi?id=876341。看起来 CSS 规范说任何应用了变换的固定元素都被视为绝对定位元素的容器。 Firefox 将 backface-visibility 作为转换，而 Webkit 需要显式的 transform。
请注意，filter 也会创建一个包含块。当元素具有应用了变换样式但不再应用它时，Firefox 似乎也会保留包含块。值得一读：meyerweb.com/eric/thoughts/2011/09/12/…

【解决方案3】：

似乎有些浏览器将应用相对于窗口的固定定位，而 Firefox 则相对于<body /> 应用它。你需要让你的body 100% 高：

body {
    height: 100%;
}

但是 .header 的边距在 body 元素之外折叠。改变这个：

margin: 25px auto;

到这里：

margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;

【讨论】：

是的，刚刚注意到。我赞成你的 b/c 我忽略了“自动”边距实际上正在被使用的事实 - DOH！

【解决方案4】：

我通过将使用 position: fixed; 的元素移出使用 transform: translateX(-50%); 的原始父元素来解决了这个问题。

这样……

<div class="transformed-container">
   <div="fixed-element"></div>
</div>

...变成...

<div class="transformed-container"></div>

<div class="fixed-element"></div>

有两件事让我得出这个结论：

@Pankaj 的回答表明 translate 值可能会导致问题。
@Wildhoney 对另一个答案的评论引用了对根本原因的解释：http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

【讨论】：

这是一个很好的答案！就我而言，我有一个带有background-attachment: fixed 的元素，它的作用类似于background-attachment: scroll。我注意到当我将它从其父级移出时它按预期工作，但不知道为什么。我尝试将其转换为position: fixed，并在其容器上使用clip-path，但后来我遇到position: fixed，其行为类似于position: absolute。我从这个答案中了解到，我的问题是动画中的父级，因此在动画后将 transform 设置为 0。现在，我将动画设置transform 设置为一个空字符串。
另外，filter css 属性也会破坏固定位置的元素。
那个链接救了我。谢谢。应该包括那里的信息摘要，以防链接中断 - 它已经很旧了。面向未来读者的简短版本：CSS 中有一个怪癖，其中某些操作（如变换）从那时起永久地中断任何子元素的“位置：固定”。

【解决方案5】：

问题似乎出在你的身上，我添加了 width:100%;高度：100%；和溢出：隐藏；在我的火狐中，它看起来很好，除了底部菜单栏的高度超过底部的一半。

【讨论】：

【解决方案6】：

不确定为什么浏览器的呈现方式不同，尽管解决方案非常简单。您需要将父元素 (html/body) 的高度设置为 100% 以填充整个页面。似乎 FF 将固定元素呈现在内容的底部，而不是窗口的底部。添加以下内容将使其跨浏览器工作：

html, body {
    height: 100%;
}

此外，您还应该在.header 元素上使用填充而不是边距。这将解决另一个问题。

.header {
    margin: 0 auto;    /* use a value of 0 rather than 25px */
    padding: 25px 0;
}

我在浏览器中测试了所有这些，它现在可以在 FF 中运行。它还应该在 Chrome 和其他平台中正确呈现。

【讨论】：

【解决方案7】：

我需要从 animateCSS 库中从 fixed-on-scroll 元素的上级容器中删除一些 CSS 类，该元素具有过渡效果。

$(window).on('scroll', function () {
     if (distance <= 65) {
        $('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
 });

也许有帮助

【讨论】：

【解决方案8】：

经过 5 小时的调试，如果您使用的是 tailwindcss，并且您的某个父元素上有 drop-shadow-*（注意它不是 shadow-*）类，它将导致该元素中的固定元素表现得像他们're absolute 定位。

不知道为什么会这样，可能是因为 tailwindcss 使用了很多组合的 CSS 变量。

以下是使用 tailwindcss drop-shadow-* 实用程序生成的示例，似乎其中一个父元素上的 filter 属性会导致与转换相同的意外行为：

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
    filter: var(--tw-filter);
}

【讨论】：