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

Difference between position:sticky and position:fixed?

提问by

The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:stickyand position:fixed? I would also appreciate an example.

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

I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/positionand a few other articles, but I still don't get it.

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

回答by BoltClock

position: fixedalways fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.

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

Without going into specific details, position: stickybasically acts like position: relativeuntil an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.

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

The reason why I want to avoid going into details is because position: stickyis brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: stickyyet anyway (hopefully this will change within the next year).

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

Mozilla recently presented its implementation of position: stickyhere. It's highly worth a watch.

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

回答by Pransh Tiwari

See this self-explanatory example for better clarity. CODEPEN

请参阅此不言自明的示例以获得更好的清晰度。代码笔

Fixed Position:

固定位置：

1. An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.

2. It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).

3. If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).

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

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

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

Sticky Position:

粘性位置：

1. An element with sticky position is positioned based on the user's scroll position. As @Boltclockmentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.

2. It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).

3. If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.

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

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

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

So if you want to achieve the fixed functionality but inside a container, use sticky.

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