另一个position: sticky不能工作的常见场景是，如果它的父类有display: flex或display: grid。

在这种情况下发生的是粘性位置在工作，但你看不到它，因为元素被完全拉伸了。尝试使用align-self: baseline降低它的高度，你会看到效果。

这里有两个答案:

从正文标签中移除溢出属性 设定高度:100%到机身以解决溢出问题y:自动

Min-height: 100%不工作，而不是高度:100%

这是什么绊倒了我…我的粘性div是在另一个div，所以父div需要一些额外的内容后粘性div，使父div“足够高”的粘性div，以“滑过”其他内容，因为你向下滚动。

所以在我的情况下，在黏黏的div之后，我必须添加:

    %div{style:"height:600px;"} 
       

(我的应用程序有两个并排的div，左边是一个“高”图像，右边是一个短的数据输入表单，我希望当你向下滚动时，数据输入表单漂浮在图像旁边，这样表单就总是在屏幕上。它不会工作，直到我添加了上面的“额外内容”，这样粘性div就有东西可以“滑动”

关于位置粘性最常见的错误之一是:

浏览器不支持 不包括任何上、下、右、左属性。请记住，如果您没有提供足够的信息，浏览器将不知道如何正确处理这些信息。如果没有它，它将是静态定位的。

在这篇文章中，我已经写过这方面的内容。只是做个参考，这样我就不会重复太多了。

这是MarsAndBack和Miftah Mizwar回答的延续。

他们的答案是正确的。但是，很难确定问题的始祖。

简单来说，只需在浏览器控制台中运行这个jQuery脚本，它就会告诉您每个祖先上overflow属性的值。

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

如果一个祖先没有溢出:可见改变它的CSS使它有!

同样，正如在其他地方所述，确保你的sticky元素在CSS中有这个:

.your-sticky-element {
    position: sticky;
    top: 0;
}

我知道这是一个老帖子。但如果有人像我一样，最近才开始摆弄位置:粘性，这可能是有用的。

在我的例子中，我使用position: sticky作为网格项。它没有工作，问题是一个溢出x:隐藏在html元素。只要我删除了该属性，它就工作得很好。有溢出x:隐藏在身体元素似乎工作，但不知道为什么。