CSS 粘性定位

CSS 的 position 属性用于设置 HTML 元素的定位。它还用于将一个元素放置在另一个元素之后，并可用于脚本动画效果。"position: sticky;" 用于根据用户的滚动位置来定位元素。

此 CSS position 属性允许元素在滚动达到特定点时固定不动。根据滚动位置，粘性元素会在 fixed 和 relative 之间切换。在达到视口中指定的偏移量之前，该元素将相对定位。然后，类似于 position: fixed，该元素会固定在一个位置。

CSS Position: Sticky 的图解

让我们通过图解来更好地理解 CSS 属性。

插图 1

在本图中，我们将使用 CSS 来创建粘性元素。

代码

输出

在输出中，我们可以看到天蓝色的 HTML 元素在滚动时也不会移动，因为它是一个粘性元素，所以它会保持在原地。

插图 2

在本图中，我们将使用 CSS 粘性定位来构建粘性导航栏。

代码

输出

在输出中，我们可以看到导航栏在滚动时不会移动，因为它是一个粘性元素，所以它会保持在同一位置。

插图 3

在本图中，我们将使用 CSS 粘性定位来构建 1 个粘性的主标题和 2 个粘性的段落标题。

代码

输出

在输出中，我们可以看到主标题和 2 个段落标题在滚动时不会移动，因为它们是粘性元素。

插图 4

在本图中，我们将使用 CSS 粘性定位来构建侧边栏并将其设置为粘性定位。

代码

输出

滚动后，我们可以看到侧边栏仍然保持在同一位置，因为它被设置为粘性定位。

浏览器兼容性

支持 CSS 粘性定位的浏览器如下：

• Internet Explorer
• 火狐
• Safari
• 谷歌浏览器
• Opera

结论

在本文中，我们已经理解了 CSS 粘性定位。CSS 粘性定位是 CSS position 属性的一个值，用于使 HTML 元素在达到其阈值时固定在一个位置。