位置：粘性和位置：固定之间的区别？

Question

因为我是 CSS 新手，所以文档很难理解。那么任何人都可以解释position:sticky和position:fixed之间的实际区别吗？我也希望能举个例子。

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

Answer 1

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

在不涉及具体细节的情况下，position: sticky 基本上就像position: relative 一样，直到元素滚动超出特定偏移量，在这种情况下它变成position: fixed，导致元素“粘”在它的位置而不是被滚动出视图。当它滚动回到原来的位置时，它最终会被卡住。至少，理论上我是这么理解的。

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

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

Answer 2

请参阅这个不言自明的示例以获得更好的清晰度。 CODEPEN

固定位置：

1. 相对于视口或浏览器窗口本身显示具有固定位置的元素。即使页面滚动，它也始终保持在同一个位置。

2. 它不影响页面中其他元素的流动，即不占用任何特定空间（就像position: absolute）。

3. 如果它是在其他容器中定义的（有或没有相对/绝对位置的 div），它仍然是相对于浏览器而不是那个容器定位的。 （这里与position: absolute不同）。

固定位置：

1. 根据用户的滚动位置定位具有粘性位置的元素。正如@Boltclock 所提到的，它的作用基本上类似于 position: relative ，直到一个元素滚动到一个特定的偏移量之外，在这种情况下它变成了 position: fixed。当它向后滚动时，它会回到之前的（相对）位置。

2. 它影响页面中其他元素的流动，即占据页面上的特定空间（就像position: relative）。

3. 如果它是在某个容器内定义的，它会相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移量它变成位置：固定。

因此，如果您想在容器内实现固定功能，请使用粘性。

Answer 3

让我把它变得非常简单。

fixed 的位置不会占用 body 的任何空间，因此下一个元素（例如：图像）将位于固定元素的后面。

sticky位置占据空间，所以下一个元素不会隐藏在它后面。

下面的图片是fixed，图片的一部分隐藏在导航栏后面，因为固定元素不占用空间。您可以通过添加边距或伪类之前/之后来解决此问题

这例如是sticky 位置。此处图像已完全显示，导航栏后面没有隐藏任何内容，因为粘性元素占用了文档中的空间。

Answer 4

假设您的网站顶部有一个导航栏，并且您希望将其固定，这样当您向下滚动页面时，它始终可见。

如果你给它position: fixed;，那么顶部的页面内容将隐藏在导航栏下方。相反，如果你决定给它position: sticky; top: 0;，导航栏将保留在文档流中，并将其下方的内容优雅地推到下方，因此不会隐藏任何内容。

当您应用 position: fixed; 时，导航栏会脱离正常的文档流，类似于您 float 一个元素时。

Answer 5

1. fixed 固定在 X 轴和 Y 轴上，而 sticky 仅固定在 X 轴上。
2. sticky 只会固定到容器末尾，而fixed 会固定到网页末尾。