position: sticky 粘性定位

今天写项目时遇到一个问题，页面中的锚点设置了绝对定位，但当整个页面往下滚动时，锚点会飞上去，这里需求是当页面整体未滚动时锚点固定定位在左侧顶部，但当整个页面滚动时锚点需要吸顶。

为了实现这个需求，我们可以使用position属性的sticky属性值。

最终我设置

.anchor-linkfloat: left;margin-left 40px;position:sticky;top: 10px;overflow: auto;min-height: calc(100vh - 230px);

float：left；实现了锚点区域浮动靠左（不撑开中间列表的位置）

margin-left：40px；且与左侧有40px的边距（完全靠左不美观）

position:sticky;
top: 10px; 实现粘性定位

（在滚动时保持 10 像素的顶部偏移，当页面滚动，并且元素的顶部边缘到达 10 像素的阈值时，它会开始固定。）

overflow：auto （是保证我锚点内部内容过多时可以滚动）

 position: sticky 

是一种 CSS 定位属性，结合了 relative 和 fixed 的特性。元素根据正常文档流进行定位，但当页面滚动到一定位置时，会固定在指定容器内的某个位置。

特点：

1. 相对定位：元素起初根据正常文档流进行定位，就像 position: relative。

2. 固定定位：当页面滚动到达一定的阈值时，元素会变为固定状态，保持在指定位置。

3. 偏移属性：通常需要与 top、right、bottom 或 left 使用，以指定固定后的位置。

4. 容器限制：元素仅会在其最近的可滚动祖先容器内固定，不能超出该容器。