让我在这里稍微设置一下场景。
您有一个网站，并且像大多数网站一样，它可以滚动。
此网站将包含模态框。您可能会将模态框的 position 设置为 fixed，以便无论滚动如何，它都处于可预测的位置。模态框本身也可能滚动。
请注意，模态框有一个关闭按钮。我们可以将其 position 设置为 absolute，使其位于右上角，但如果我们的模态框滚动，就会出现问题。
应该使用更多 position: fixed 来解决，对吧？遗憾的是，事实并非如此，因为 position: fixed 没有局部上下文。
好吧……实际上 确实有点（奇怪地）存在。如果模态框有任何 CSS 变换（如果您使用旧的 left: 50%; transform: translateX(-50%); 技巧将其居中，则可能已经存在），则固定位置的关闭按钮将回到原位。
但是……由于变换帮助将关闭按钮拉回原位，您可以看到它的行为类似于 position: absolute 而不是 position: fixed。¯\_(ツ)_/¯
不过，这里有一个可能性。这个想法是 position: sticky 从某种意义上说，是一个局部作用域的 position: fixed。如果我们无论如何都将关闭按钮定位在 top: 0 处，它就会随着模态框向下滚动而粘在那里。
我只是认为这是一个有趣的可能性。老实说，如果我有一些我担心滚动的模态框，我可能会使用 .modal-header 容器和 .modal-content 容器。标题将始终位于顶部，而容器将是可滚动的内容。
这里有一个快速简便的 CodePen 示例 https://codepen.io/ashconnolly/pen/wmrNJK
这是一个解决此问题的非常有趣的解决方案。我实际上注意到它有时在 CodePen 资产面板上让我有点困扰，并且想提一下，但我意识到我甚至没有解决方案可以提供。那将是一个很酷的更改！
完全放弃关闭按钮怎么样？
可以在覆盖元素的右上方放置一个“伪造”的关闭按钮，但最终，如果点击模态框外部（覆盖元素上）会关闭它，为什么要费心使用关闭按钮呢？也许是为了可访问性？
只是问问。
谢谢，这将很有用。 :)
我之前尝试过使用自动位置来获得相同的效果，但在 IE11 和 Edge 中它非常不稳定。
position:sticky 解决方案看起来是一种更简洁的方法。