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

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 这里.这非常值得一看.

Answer 2

为了更清晰,请参阅此不言自明的示例.CODEPEN

固定位置:

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

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

3. 如果它在某个其他容器(div有或没有相对/绝对位置)内定义,它仍然相对于浏览器而不是该容器定位.(这里与之不同position: absolute).

粘性位置:

1. 具有粘性位置的元素基于用户的滚动位置定位.正如@Boltclock所提到的,它基本上就像position:relative一样,直到一个元素滚动超过一个特定的偏移量,在这种情况下它转变为position:fixed.当它向后滚动时,它会回到其先前(相对)位置.

2. 它会影响页面中其他元素的流动,即占据页面上的特定空间(就像position: relative).

3. 如果它在某个容器内定义,则它相对于该容器定位.如果容器有一些溢出(滚动),根据滚动偏移,它将变为位置:固定.

因此,如果要在容器内部实现固定功能,请使用sticky.

Answer 3

让我让它变得非常简单。

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

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

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

这例如是sticky位置。这里图像完全显示，导航栏后面没有隐藏任何东西，因为粘性元素占据文档中的空间。

Answer 4

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

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

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