position: sticky 的 top 值需设为具体长度（如0、20px），表示元素距其最近滚动祖先顶部的距离开始吸附；若无效，主因是祖先未设 overflow-y:auto/scroll 且有明确高度。
position: sticky 的 top 值到底设多少才生效
position: sticky 不是“固定在视口顶部”，而是“相对其最近的滚动祖先，距该祖先顶部 top 距离时开始吸附”。top 设为 0 表示元素一滚动到祖先容器顶部就粘住；设为 20px 则要等它离祖先顶部还有 20px 时才触发粘性行为。
常见错误是设了 top: 0 却没效果——大概率因为父容器没设置 overflow（如 auto 或 scroll），或父容器高度不够导致根本没滚动空间。
-
top必须是具体长度值（0、1rem、20px），不能是auto或百分比 - 如果父容器有
padding-top，top是从 padding 边缘算起，不是内容区顶部 - 多个 sticky 元素堆叠时，
top值小的会先吸住，可能盖住top值大的那个
为什么设置了 top 还不 sticky？检查这三处
最常被忽略的是：sticky 元素必须有可滚动的**最近块级祖先**，且该祖先不能是 overflow: hidden 或默认的 visible（它不创建滚动上下文）。
- 父容器需显式设置
overflow-y: auto或scroll（哪怕内容没溢出） - 父容器要有明确高度（如
max-height: 500px），否则无法触发滚动 - 确认没有其他样式覆盖，比如
position: relative父级 +transform会创建新层叠上下文，有时干扰 sticky 计算
sticky 和 fixed 的关键区别在哪
position: fixed 脱离文档流、相对于视口定位；position: sticky 仍在文档流中、只在滚动范围内“临时固定”。这意味着：
立即学习“前端免费学习笔记（深入）”；
- sticky 元素仍占据原始位置的空间（不会让下面内容上移），fixed 则完全腾空
- sticky 在滚动停止后可能“松开”回到文档流，fixed 永远钉在视口某处
- sticky 受限于祖先滚动容器边界——一旦滚出该容器范围，就会自动解除粘性
.container {
max-height: 400px;
overflow-y: auto;
}
.sticky-header {
position: -webkit-sticky; /* Safari 兼容 */
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}移动端 iOS Safari 的 sticky 兼容陷阱
iOS 15.4+ 基本支持，但老版本（尤其 iOS 13–15.3）对 sticky 支持极不稳定：可能不触发、触发后卡死、或在快速滚动时跳动。绕过方式有限，但可尝试：
- 给 sticky 元素加
backface-visibility: hidden或will-change: transform（部分机型有改善） - 避免在
body直接设 sticky，务必包裹进一个有overflow的容器内 - 真不行就用 JS 监听
scroll+getBoundingClientRect()手动切fixed类（但要注意滚动抖动和性能）
真正难搞的不是 top 值本身，而是整个滚动上下文是否被浏览器正确识别——这点在嵌套滚动、iframe、Webview 场景里最容易失效。
