注意空网格区域!

在我的例子中，我有这样的东西:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

我希望当用户完成结帐表单时，总结网格项具有粘性。它没有工作，因为那些空的网格项(用。标记)。

解决方案是删除这些空项，如下所示:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}

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

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

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

我也有同样的问题，我在这里找到了答案。

如果你的元素没有像预期的那样粘在一起，首先要检查应用到容器上的规则。

具体来说，查找元素的任何父元素上设置的溢出属性。不能在position: sticky元素的父元素上使用:overflow: hidden、overflow: scroll或overflow: auto。

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

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

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

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

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

溢出需要被移除或设置为initial来创建位置，这是TRUE: sticky作用于子元素。我在我的Angular应用中使用了材质设计，发现一些材质组件改变了溢出值。我的解决方案是

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}