我知道太晚了。但我发现了一个解决方案，即使你使用溢出或显示:flex在父元素粘性将工作。

步骤:

为你想要设置粘性的元素创建一个父元素(确保创建的元素是相对于主体或全宽和全高的父元素)。 向父元素添加以下样式: ｛ 位置:绝对的; 身高:100 vmax; ｝ 对于粘滞元素，请确保添加的z-index高于页面中的所有元素。

就是这样!现在它必须起作用。问候

我相信这篇文章说了很多关于粘性的工作原理

How CSS Position Sticky Really Works! CSS position sticky has two main parts, sticky item & sticky container. Sticky Item — is the element that we defined with the position: sticky styles. The element will float when the viewport position matches the position definition, for example: top: 0px . Sticky Container —is the HTML element which wraps the sticky item. This is the maximum area that the sticky item can float in. When you define an element with position: sticky you’re automatically defining the parent element as a sticky container!

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

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

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

注意空网格区域!

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

.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';
}

如果danday74的修复不起作用，检查父元素是否有一个高度。

在我的情况下，我有两个孩子，一个漂浮在左边，一个漂浮在右边。 我想要右边的浮动一个变得粘性，但必须添加一个<div style="clear: both;"></div>在父元素的末尾，赋予它高度。

1.如果overflow在元素的任何父元素上设置为hidden、scroll或auto，位置粘滞很可能不起作用。

2.如果任何父元素都设置了高度，位置粘滞可能无法正常工作。