位置:粘性和位置:固定之间的区别? [英] Difference between position:sticky and position:fixed?

问题描述

由于我是CSS新手，因此很难理解该文档.那么谁能解释position:sticky和position:fixed之间的实际区别?我也希望得到一个例子.

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

我已经经历过 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 和其他一些文章，但我仍然不明白.

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

推荐答案

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

position: fixed always 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: sticky基本上类似于position: relative，直到元素滚动到特定偏移量以上为止，在这种情况下，它变为position: fixed，从而导致该元素粘"在其位置而不是被滚动到视线之外.当它滚动回到其原始位置时，最终会松开.至少，这就是我从理论上理解它的方式.

Without going into specific details, position: sticky basically acts like position: relative until 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: sticky(希望这种情况将在明年改变).

The reason why I want to avoid going into details is because position: sticky is 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: sticky yet anyway (hopefully this will change within the next year).

Mozilla最近在此处展示了其实现.手表非常值得.

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

这篇关于位置:粘性和位置:固定之间的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！