position: sticky 是 relative 与 fixed 的结合，元素在滚动到临界点时吸附视口。需设置 top 等偏移值，父元素 overflow 为 visible，推荐加 -webkit-sticky 兼容 safari，常用于吸顶导航栏。
CSS 中的 sticky 定位是一种特殊的定位方式，可以让元素在滚动过程中“粘”在视口的某个位置，常用于导航栏、侧边栏或表格表头的固定显示。实现 sticky 效果并不复杂，但需要满足一些前提条件。
什么是 position: sticky？
position: sticky 是 relative 和 fixed 定位的结合体。元素在正常文档流中表现为相对定位（relative），当页面滚动到某个临界点时，它会像固定定位（fixed）一样停留在指定位置，直到父容器移出视口。
简单来说：元素“原本在哪就还在哪”，但滚动到某个位置后，它会“粘”在屏幕上不动。
使用 sticky 的基本语法
.sticky-element {
position: -webkit-sticky; /* 兼容 Safari */
position: sticky;
top: 10px; /* 粘性触发的临界值 */
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须设置 top、bottom、left 或 right 之一，否则 sticky 不生效。最常用的是 top。
- 通常配合 top: 0 实现顶部吸附效果，比如导航栏吸顶。
- 建议加上 -webkit-sticky 以兼容老版本 Safari。
sticky 生效的前提条件
即使写了 position: sticky，也可能不生效，常见原因如下：
- 父元素没有设定高度限制：如果父容器太短，元素还没滚动到临界点就已经滚出视口，sticky 就没机会触发。
- 父元素设置了 overflow: hidden、auto 或 scroll：这会阻止 sticky 行为。要让 sticky 正常工作，父元素的 overflow 必须是 visible（默认值）。
- 没有设置 top 等偏移值：只写 position: sticky 是不够的。
- 元素本身是 flex 或 grid 容器的子项且被限制：某些布局下需特别注意容器属性。
实际应用示例：吸顶导航栏
一个典型的 sticky 使用场景是页面滚动时，导航栏固定在顶部。
<nav class="navbar"> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#contact">联系</a> </nav>
.navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 100;
}
当用户向下滚动页面，导航栏滚动到顶部时，就会“粘”在屏幕上方，不会消失。
注意事项与常见问题
- Safari 需要 -webkit-sticky：虽然现代浏览器已支持标准写法，但为了兼容性，建议保留前缀。
- 不要在 table 内部直接对 tr 使用 sticky：部分浏览器支持不佳，可改用 th + position: sticky 并设置 display: block。
- z-index 建议设高：避免被其他内容遮挡。
- 慎用于移动端小屏幕：粘性元素可能占据过多可视区域。
基本上就这些。只要记住：写 sticky 要配 top，父级别设 overflow hidden，再加个 webkit 前缀保兼容，基本就能稳稳实现粘性效果。
