HTML元素定位-如何让元素始终保持在没有javascript的可见区域中

Question

我需要一个网页上的小部件，这样当页面在最大化窗口中加载时，该元素看起来是内联的。

当垂直滚动条向下移动时，元素向上滚动，直到碰到浏览器控件的顶部可见行。此后，如果您进一步向下滚动，此元素将停留在浏览器的顶部边框。

也就是说，如果有足够的屏幕区域并且可以在当前窗口上可见，它就会显示为内联，并且当它的内联位置由于滚动而超出可见窗口的那一刻，这个元素会粘在它的边框上点击并停留在那里，直到滚动将其内联位置带回可见窗口。

我只需要完全通过 CSS 来实现这一点 - 没有 javascript。知道如何做到这一点吗？

提前感谢您查看这篇文章。

Answer 1

您可以将视图设置为 position: fixed，使其保持在可见区域。

.selector {
   position: fixed;
   /* rest required styling */
}