位置:粘在Firefox中不起作用

Question

位置:据说粘在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;
}

当我向下滚动侧边栏时,滚动内容.它不坚持.任何人都知道可能是什么问题？

Answer 1

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

实际的问题是，sticky 不能很好地与父元素display: flex 配合使用。

参考：
-位置：粘性，适用于 Chrome 但不适用于 Firefox
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080

Answer 2

如果您指定一个top值,它会坚持:

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

小提琴