CSS - 定位详解

CSS 定位是一种控制元素在页面中的位置的方法。主要的定位属性包括：

• static：默认定位，元素按照文档流排列。

• relative：相对定位，元素相对于其自身原本的位置进行偏移。

• absolute：绝对定位，元素相对于其最近的非静态定位祖先元素进行定位。

• fixed：固定定位，元素相对于视口进行定位，即无论页面滚动与否，元素始终固定在相同位置。

• sticky：粘性定位，元素根据用户滚动的位置在特定阈值范围内切换 fixed 和 relative 定位。

通过这些定位属性，可以精确控制元素在页面中的位置和布局。

sticky

position: sticky; 是 CSS 中的一种定位属性，用于创建一个相对定位的元素，当滚动到特定位置时会固定在屏幕上。具体使用方法如下：

1. 将元素设置为 position: sticky;。

2. 指定 top、bottom、left 或 right 中的至少一个值来定义元素固定时的位置。

使用场景包括：

• 创建导航栏，在页面滚动时保持在屏幕顶部。

• 制作表格的表头或侧边栏，在滚动时保持可见。

• 实现页面内的固定广告或提示信息。

position: sticky; 可以在需要元素在滚动时保持固定位置的情况下使用，提供了一种简单而有效的方法来实现这种效果。