position:sticky 和 position:fixed 的区别？

Question

由于我是 CSS 新手，因此文档很难理解。那么谁能解释一下 position:sticky 和 position:fixed 之间的实际区别？我也很感激一个例子。

我浏览了 https://developer.mozilla.org/en-US/docs/Web/CSS/position 和其他几篇文章，但我仍然不明白。

原文由 user2791037 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

position: fixed 始终将元素固定到其滚动容器或视口中的某个位置。无论您如何滚动它的容器，它都将保持在完全相同的位置，并且不会影响容器内其他元素的流动。

没有进入具体细节， position: sticky 基本上表现得像 position: relative 直到一个元素滚动到一个特定的偏移量之外，在这种情况下它变成 position: fixed “坚持”到它的位置而不是被滚动到视野之外。当它向回滚动到原来的位置时，它最终会松开。至少，理论上我是这么理解的。

我不想详细介绍的原因是因为 position: sticky 是全新的、实验性的（如您链接到的文档中所示），尚未最终确定。即使是我上面所说的，在不久的将来也可能会发生变化。您将无法使用 position: sticky 无论如何（希望这会在明年内改变）。

Mozilla 最近 在此处 展示了其 position: sticky 的实现。非常值得一看。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议