position: sticky失效主因是祖先容器设置overflow: hidden/auto/scroll切断锚定链，需逐层检查并改用overflow: clip；多标题接力吸顶需按DOM顺序设不同top值，且共用父容器不能为flex/grid直接子项；吸顶后内容重叠需用margin-top避让。
直接给 position: sticky 加 top 值就能生效，但绝大多数失效不是因为写错了，而是父容器悄悄“拦住了”它。
为什么加了 position: sticky 和 top: 0 还是不吸顶？
根本原因往往不在目标元素本身，而在它的任意一个祖先节点上：
-
overflow: hidden、overflow: auto或overflow: scroll—— 它们会切断 sticky 的锚定链，让元素“找不到”滚动边界 -
transform、filter、will-change—— 这些属性会创建新层叠上下文，sticky 在其中无法正确计算位置 - 父容器是
display: flex或display: grid的直接子项 —— 某些浏览器（尤其旧版 Safari）下会干扰 sticky 行为 - 父容器高度不足或
height: auto且无滚动约束 —— sticky 需要可滚动的上下文才能触发
怎样写才真正可靠？
最小可行配置必须同时满足三项硬性条件：
- 目标元素必须显式声明
top（或bottom/left/right），仅position: sticky无效 - 目标元素的**所有**祖先容器（包括
body、框架根节点、滚动容器）都不能有上述干扰样式；若无法移除overflow: hidden，可尝试改用overflow: clip（现代浏览器支持） - 目标元素下方必须有足够高度的内容，否则没有滚动空间触发吸附逻辑
示例（安全写法）：
立即学习“前端免费学习笔记（深入）”；
nav {
position: sticky;
top: 0;
z-index: 1000;
background: white;
}
/* 确保 nav 的父容器没有 overflow: hidden/transform 等 */
header {
overflow: visible;
/* 不设 height，或设 min-height，避免截断 */
}
移动端抖动和内容遮挡怎么破？
抖动本质是 sticky 触发时文档流塌陷导致的视觉跳变，遮挡则是 fixed 类行为未预留空间：
- 吸顶后内容上蹿？给紧跟在 sticky 元素后面的兄弟元素加
margin-top，值等于该 sticky 元素的自然高度（含 padding/border） - 响应式场景下，用
@media控制是否启用sticky，**不要切到fixed** —— 后者彻底脱离文档流，必然引发重排抖动 - iOS Safari 旧版本兼容性差？降级方案不是简单加 JS 切
fixed，而是插入占位<div>并同步top偏移，否则状态栏区域容易遮挡
真正难的不是写对那两行 CSS，而是排查哪一层祖先偷偷加了 overflow: hidden 或 transform —— 这类问题在框架封装层（如 Vue Router 容器、React 虚拟滚动 wrapper）里最隐蔽，也最容易被忽略。
