【CSS篇】对position: sticky定位的深入理解

在 CSS 的定位体系中，position: sticky 是一种结合相对定位和固定定位特性的"粘性定位"方式 。它允许元素在滚动页面时，在某个特定位置"粘住"，常用于实现吸顶效果、导航栏固定、表格列冻结等交互体验。

本文将系统讲解：

一、什么是 `position: sticky`？

position: sticky 是一种特殊的定位方式，它的行为会根据用户的滚动行为动态切换：

📌 所以你可以把它理解为一个智能的 relative + fixed 混合体。

css 复制代码

.sticky-element {
  position: sticky;
  top: 10px; /* 必须设置 top/right/bottom/left 中的一个 */
}

html 复制代码

<div class="container">
  <div class="sticky-header">我是吸顶标题</div>
  <div class="content">滚动内容...</div>
</div>

css 复制代码

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

当用户向下滚动 .sticky-header 所在区域时，该元素会在顶部停留，直到容器结束或下一个 sticky 元素覆盖。

阶段	表现形式	描述
初始阶段	类似 `relative`	元素位于文档流中，随页面一起滚动
达到阈值	类似 `fixed`	当滚动到 `top` / `bottom` 等设定值时，元素脱离文档流并固定在视口中的指定位置
脱离范围	回归 `relative`	当元素离开其父容器或遇到其他 sticky 元素时，恢复为相对定位

必须设置 top / right / bottom / left 中的一个属性
- 否则不会生效，表现为 relative；
- 示例：
  css 复制代码
```
position: sticky;
top: 10px; /* 必须有 */
```
不能是根元素（如 <html> 或 <body>）
- 一般用于嵌套在块级容器内的子元素；
父容器不能是 overflow: hidden / clip / transform / filter 等创建新层叠上下文的属性
- 否则 sticky 失效；
父容器要有足够的高度或内容触发滚动
- 如果没有滚动空间，sticky 就没有机会被激活；
建议设置 z-index
- 控制层级，防止被其他元素遮挡；

属性	是否脱离文档流	定位基准	是否受滚动影响	常见用途
`static`	否	文档流	否	默认值，无特殊定位
`relative`	否	自身原位置	否	微调元素位置
`absolute`	是	最近非 static 祖先	是	弹窗、菜单、浮动层
`fixed`	是	视口（浏览器窗口）	否	返回顶部按钮、悬浮广告
`sticky` ✅	动态变化	滚动时切换基准	动态响应	导航栏吸顶、表格列冻结

position: sticky 是一种"智能定位"方式，它在滚动时从相对定位切换为固定定位，非常适合实现吸顶、冻结、导航栏固定等交互效果，但要注意使用条件和限制。