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

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

这里有两个答案:

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

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

有趣的时刻，我不明显:至少在Chrome 70的位置:粘是不适用的，如果你已经使用DevTools设置。

如果你的父母正在使用显示伸缩，粘滞位置将不起作用。当我在一个溶液中读到这个

由于flex box元素默认为拉伸，因此所有元素的高度都相同，不能滚动。

如果你使用display: flex;在父元素上，你必须添加这个到sticky元素align-self: flex-start;同时设置height为auto height: auto;

这就是sticky元素类的样子

.stick-ontop {
  position: -webkit-sticky !important; // for safari
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}

我知道这个问题似乎已经有了答案，但我遇到了一个具体的案例，我觉得大多数答案都没有抓住重点。

溢出:隐藏答案覆盖了90%的情况。这或多或少是“粘性导航”的情况。

但是粘性行为最好在容器高度内使用。想象一下，在你网站的右栏中，有一个新闻简报的形式，它可以随着页面向下滚动。 如果sticky元素是容器的唯一子元素，那么容器的大小是完全相同的，并且没有滚动的空间。

你的容器需要是你期望元素滚动的高度。在右列的情况下就是左列的高度。 实现这一点的最佳方法是在列上使用display:table-cell。如果你不能，并且像我一样被float:right困住了，你必须要么猜左列的高度，要么用Javascript计算它。

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

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