position: sticky不生效最常见原因是父级overflow:hidden/auto/scroll创建新粘性边界或父容器无明确高度；需检查所有祖先节点的overflow、transform等属性，并确保sticky元素设了有效top值。
直接用 position: sticky 就能实现导航栏吸顶，但必须满足父容器有明确高度且不设 overflow: hidden，否则它会失效。
为什么 position: sticky 不生效？
最常见原因是父级元素触发了层叠上下文或裁剪边界，比如：
- 父容器设置了
overflow: hidden、auto或scroll - 父容器没有设定明确高度（如
height: auto且内容未撑开） - 导航栏本身被
transform、filter或will-change影响，导致粘性定位被禁用 - 在 Flex 或 Grid 容器中，父项设了
align-items: stretch但没给子项设min-height，导致计算高度异常
top 值怎么设才合理？
top 决定元素何时“粘住”，不是距离顶部的绝对像素，而是相对其原始位置的偏移量。设为 0 表示贴顶，设为 20px 表示离顶部还有 20px 时就开始吸附。
- 若导航栏有上边距或外边框，
top应包含这部分空间，否则滚动时会出现跳变 - 移动端需考虑浏览器地址栏隐藏/显示带来的视口高度变化，
top: 0在 Safari 中可能短暂失效，可加backface-visibility: hidden强制重绘 - 避免用
vh单位设top，它在 iOS Safari 中解析不稳定
兼容性和降级方案怎么处理？
position: sticky 在现代浏览器中支持良好，但 IE 完全不支持，Android 4.4 及更早版本也无效。不能只靠 CSS 实现“真·兼容”。
立即学习“前端免费学习笔记（深入）”；
- 检测是否支持：用
CSS.supports('position', 'sticky')判断，返回false时手动监听scroll事件 +getBoundingClientRect()计算位置 - 不要用
position: fixed简单替代，它会脱离文档流，导致下方内容上移——必须同步给 body 加padding-top补齐高度 - 如果导航栏高度动态变化（比如响应式折叠），需在 resize 和 DOM 变更后重新计算
top值或 fixed 高度
真正难的不是写那行 position: sticky，而是判断它在哪一层父容器里被悄悄截断了；很多时候问题不在导航本身，而在它上面第三层的 overflow: hidden 容器里。
