sticky定位结合relative与fixed特性，元素在滚动至特定阈值时固定于视口。需设置top等偏移量，且父容器无overflow:hidden限制，常用于导航栏、表格头悬浮效果。
sticky定位是CSS中一种特殊的定位方式，它结合了relative和fixed定位的特点。元素在正常文档流中表现为相对定位（relative），当页面滚动到某个特定阈值时，它会“粘”在视口的某个位置，表现得像固定定位（fixed）。
sticky定位的基本工作原理
一个设置了position: sticky;的元素，最初按照正常的文档流进行布局，就像它是position: relative;一样。但当用户滚动页面，使得该元素距离视口边界达到设定的偏移量（如top、bottom、left或right）时，它就会“固定”在那个位置，直到其父容器脱离视口或被其他条件限制为止。
关键点：
- 必须指定一个偏移属性（如top、bottom等），否则sticky不会生效
- 元素仍占据原始文档流中的空间
- 只在滚动容器内生效，且受父级容器约束
使用方法与常见场景
最常见的用法是让导航栏或表格标题在滚动时保持可见。
立即学习“前端免费学习笔记（深入）”；
示例：实现一个粘性导航栏
.nav {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
说明：
- top: 0 表示当元素到达视口顶部时开始“粘住”
- z-index 确保元素不被其他内容覆盖
- 通常配合背景色防止内容穿透
另一个典型应用是表格列头跟随滚动：
th {
position: sticky;
left: 0;
background: #f0f0f0;
}
这能让第一列在水平滚动时保持可见。
注意事项与常见问题
虽然sticky很实用，但使用时需注意以下几点：
- 父元素不能有overflow:hidden或overflow:auto，否则可能阻止sticky行为
- 确保父容器有足够的高度来触发滚动，否则元素可能一直“粘”着不动
- 多个sticky元素在同一滚动区域可能会相互影响
- 不支持所有旧版浏览器（如IE完全不支持）
- 移动端需测试兼容性，部分WebView可能存在渲染问题
如果发现sticky无效，检查是否遗漏了偏移值，或者父级容器是否有隐藏溢出的设置。
基本上就这些。sticky定位简单高效，适合大多数需要局部固定的场景，只要注意它的依赖条件和限制即可正常使用。
