位置差异：粘性和位置：固定？

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. 如果在某个容器内定义它，则它相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移，它会变成位置：固定。

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

Answer 3

假设您决定在网站顶部创建一个导航栏，并且也希望对其进行修复，以便在浏览整个页面时始终可见。

如果您决定为其指定位置：固定；那么网站内容的某些部分将隐藏在导航栏下方。相反，如果您决定将其设置为位置：粘性；最高：0;那么您将不会遇到相同的问题。这一次，您网站的内容位于导航栏之后（无隐藏部分）。

发生这种情况的原因是，当您执行position：fixed;时；那么该导航栏就会脱离正常的文档流程。（与为float设置元素时的情况类似）

答案不严格。只是用简单的语言来解释它：〜）

Answer 4

让我让它变得非常简单。

fixed位置不会在体内占据任何空间，因此下一个元素（例如图像）将在固定元素后面。

sticky位置占据了空间，因此下一个元素不会隐藏在其后面。

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

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