77

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

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

4

5 回答 5

55

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

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

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

position: sticky Mozilla 最近在这里展示了它的实现。非常值得一看。

于 2013-10-21T18:42:19.330 回答
53

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

固定位置：

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

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

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

粘性位置：

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

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

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

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

于 2018-01-20T10:42:53.777 回答
23

让我让它变得非常简单。

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

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

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

在此处输入图像描述

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

于 2020-12-10T18:41:26.087 回答
5

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

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

当您应用position: fixed;导航栏时，会从正常的文档流中转义，类似于您float使用元素时。

于 2020-06-19T15:00:52.717 回答
0
  1. fixed固定在 X 和 Y 轴上，而sticky仅固定在 X 轴上。
  2. sticky只会固定到容器的末尾，但fixed会固定到网页的末尾。
于 2021-09-03T16:02:25.407 回答