位置：粘在Firefox中不起作用答案

【问题标题】：position: sticky not working in firefox位置：粘在Firefox中不起作用
【发布时间】：2015-02-15 18:29:15
【问题描述】：

position:sticky 据说在 Firefox 中工作，但我没有看到我的侧边栏棒。

我的 html 看起来像这样：

<div class="wrap">

    <div class="sticky">side </div>    
    <div class="content">content <div>
<div>

我的 CSS：

.content{
    height: 2000px;
    overflow: hidden;
}

.sticky{
    position: sticky;
    width: 200px;
    float: left;
}

当我向下滚动时，侧边栏会随着内容滚动。它不粘。有谁知道可能是什么问题？

【问题讨论】：

什么 FireFox 版本？
我有最新版本
截至 2018 年 2 月 position: sticky for th 在 FF 58.0 (64-bit) 中仍然不起作用。落后三年！
是的，它仍然不适用于 ff chrome Opera 和更多浏览器中的 thead 和 tr 元素

标签： css firefox sticky

【解决方案1】：

我在 2020 年遇到了同样的问题 - 这篇文章首先在谷歌中弹出，但没有一个答案对我有帮助。

实际的问题是，当父元素为 display: flex 时，sticky 不能很好地发挥作用。

参考：
- position: sticky, works in Chrome but not in Firefox
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080

【讨论】：

我很沮丧，这个错误还没有修复。我想这是低优先级，但它破坏了我的应用在 Firefox 中的布局。
display:grid 元素中的相同问题。在 Chrome 上像梦一样工作，在 Firefox 中滚动浏览我的页脚，然后在向上的路上不粘住:(
@LaZza 使用 display:block 作为粘性元素帮助我解决了同样的问题。

【解决方案2】：

如果你指定一个top 值，它就会生效：

.sticky{
   position: -webkit-sticky; /* for safari */
   position: sticky;
   width: 200px;
   float: left;
   top: 10px;
}

fiddle

【讨论】：

当你把粘性的东西放在其他东西下面时这不起作用：jsfiddle.net/3qoe0wd0/44我使用的是 Firefox 50.1.0
@ChrisSmith html 标记在你的小提琴中被破坏了。这很可能是个问题。 div 标签未在内容类上关闭。

【解决方案3】：

如果父元素设置为overflow: hidden，Position Sticky 也不起作用，因为它无法正确计算高度。

【讨论】：

它也不适用于 overflow-x: hidden 。因此，任何溢出（例如溢出、溢出-y、溢出-x）都会产生粘性。

【解决方案4】：

position: sticky 不适用于tr 等表格元素以及其他一些元素。

一种解决方法是将您想要粘贴的任何内容包装在 span 元素中。

    <style>.sticky span {position: -webkit-sticky; position: sticky; top: 0;}</style> 
    <td class='sticky' valign='top' width='200'>
    <span>
        (table contents)
    </span>
    </td>

Related answers and solutions

【讨论】：

【解决方案5】：

我可以通过使用 'display: table-cell' 来修复它。

我的问题是关于一个不想再坚持在 Firefox 上的广告，只要我在 Chrome 中使用 display: block 或 inline-block 解决了同样的问题。

【讨论】：

【解决方案6】：

我有同样的问题，即使我设置了一个最高值，粘性元素也不会粘住。解决方案是也为高度设置一个值...

【讨论】：

【解决方案7】：

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1020;
    top: 86px;
    height: min-content;
}

添加 height: min-content; 解决了我在 firefox 上的问题

【讨论】：

【解决方案8】：

对于仍然遇到此问题的任何人：

Firefox 使用父显示作为渲染条件

所以试着让孩子display: inline和父母display: inline

请记住，您仍然需要检查所有浏览器的父位置和大小。 Sticky 很棒，但它的用途非常具体。

【讨论】：

【解决方案9】：

我找到了非常简单但有效的替代方法。

position:fixed;
width:100%;
top:0;
z-index:1; /*depends on your elements*/

在所有浏览器上工作，没有公牛。如果你的 topnav 有很多元素，粘性不会起作用，我相信这是因为一些 overflow:hidden;

【讨论】：

【解决方案10】：

在我的例子中，sticky 元素采用了display: table; 属性，当我更改为display: block; 时，sticky 已在 Firefox 中修复。因此，在考虑其他修复之前，请先查看显示属性。

【讨论】：