position:sticky和position:fixed有什么区别？

Question

position:sticky和position:fixed有什么区别？

htmlcsslayoutposition

94

由于我对 CSS 还不熟悉，所以文档很难理解。请问有人能够解释一下 position:sticky 和 position:fixed 的实际区别吗？最好配上一个例子。

我已经阅读了https://developer.mozilla.org/en-US/docs/Web/CSS/position和其他几篇文章，但仍然不理解。

- user2791037

如果这个问题仍然有人关注，那么“position: sticky”现在已经很常见了，据我所知，它的机制与提出这个问题时并没有太大的变化。话虽如此，还是应该由其他人提供一个最新的答案。 - BoltClock

6个回答

57

为了更好的清晰度，请参考下面这个自我解释的示例。CODEPEN

固定定位:

使用固定定位的元素相对于视口或浏览器窗口本身显示。即使页面滚动，它始终保持在同一位置。
它不会影响页面中其他元素的流程，即不占用任何特定空间(就像position: absolute一样)。
如果它在某个其他容器(div带或不带相对/绝对位置)中定义，仍然是相对于浏览器而不是该容器定位的。(这里它与position: absolute不同)。

粘性定位:

使用粘性定位的元素基于用户的滚动位置进行定位。正如@Boltclock所提到的，它基本上的作用类似于position: relative，直到一个元素滚动超过特定的偏移量，此时它会变成position: fixed。当它被滚动回来时，它回到它先前的相对位置。
它影响页面中其他元素的流程，即在页面上占用特定的空间(就像position: relative一样)。
如果它在某个容器中定义，它将相对于该容器定位。如果容器有一些溢出(滚动)，则根据滚动偏移量，它会变成position:fixed。

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

- Pransh Tiwari

2

请注意，并非所有浏览器都支持粘性定位。请参见：https://caniuse.com/#search=sticky - ThdK

35

让我来简单解释一下。

fixed 定位不会在文档中占用空间，所以紧接着固定元素（例如图片）的下一个元素会被遮盖。

sticky 定位会占用空间，所以下一个元素不会被隐藏在其后面。

下面的图片是采用 fixed 定位。图片的某些部分被导航栏遮盖了，因为固定元素不占用空间。您可以通过添加 margin 或者使用伪类解决这个问题。

这个例子是使用 sticky 定位。这张图片完全显示，没有任何东西被导航栏遮盖，因为粘性元素在文档中占用空间。

- pranav shinde

5

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

如果您给它设置position: fixed;，则页面顶部的内容将隐藏在导航栏下面。相比之下，如果您决定给它position: sticky; top: 0;，则导航栏将保持在文档流中，并优雅地将其下面的内容向下推动，因此没有内容被隐藏。

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

- Saurabh Mahra

0

Fixed和Sticky非常相似，但它们之间有一个重要的区别 -

1. position:fixed：它将直接使用top、bottom、left、right将元素固定在提供的位置。

<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>

- 这里的段落位置将始终固定在顶部：0像素。

2. position:sticky：它不会直接将元素固定在所提供的位置。它将随着滚动初始移动元素。只有当元素到达指定位置时，使用 top、bottom、left、right 才将其固定。在此之前，它将随着滚动移动。

<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>

- 这里的带有粘性定位的段落只有在元素到达顶部0像素位置时才会固定或粘贴。

- Gokul Kadnar

0

fixed 在 X 和 Y 轴上都固定，而 sticky 只在 X 轴上固定。
sticky 仅在容器的末尾固定，但是 fixed 将一直固定到网页的末尾。

- Malhar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

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

没有特别详细的解释，position: sticky基本上像是position: relative，直到一个元素滚动超出特定偏移量，然后它变成了position: fixed，导致该元素“粘贴”在原位而不是被滚动隐藏。当它向其原始位置滚动回来时，它最终会变得不粘。至少在理论上是这样理解的。

我希望避免详细讨论的原因是position: sticky是全新的、实验性的（正如您链接的文档所示），尚未最终确定。即使是我上面所说的内容，在不久的将来也可能发生改变。您现在也无法使用position: sticky（希望在未来一年内能够改变）。

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