sticky定位失效主因是父容器overflow非visible或未设top值，需确保最近可滚动祖先无overflow:hidden/auto/scroll且显式声明top，同时避免transform等创建新层叠上下文的属性。
sticky 定位为什么在顶部菜单上不生效
直接写 position: sticky; 但导航条没停住，大概率是父容器“挡住了”——sticky 要求最近的**有滚动行为的祖先容器**不能有 overflow: hidden、overflow: auto 或 overflow: scroll（除非该容器本身也在滚动），否则粘性失效。另外，sticky 必须配合 top（或 bottom）值才起作用，只写 position: sticky 是无效的。
- 检查导航条父级（比如
<header></header>或<div class="wrapper">）是否设置了 <code>overflow，临时改成visible测试 - 必须显式设置
top: 0（或其它数值），否则浏览器不知道“粘在哪” - 确保导航条不在
transform、perspective、filter等会创建新层叠上下文的属性包裹内，这些也会中断 sticky 行为
基础用法：让 nav 固定在视口顶部
最简可行配置就是三行 CSS，但每行都有讲究：
.nav {
position: sticky;
top: 0;
z-index: 100;
}
-
position: sticky是相对定位 + 粘性触发的混合行为，它仍占据文档流位置，不会像fixed那样脱离流造成下方内容上跳 -
top: 0表示“当元素顶部到达视口顶部时开始粘住”，也可设为top: 12px留出间隙 -
z-index不是必需，但若页面有下拉菜单、模态框等，不加容易被遮挡
和 fixed 定位的关键区别在哪
很多人误以为 sticky 就是“智能 fixed”，其实逻辑完全不同：
-
fixed脱离文档流，始终相对于视口定位，滚动时无视父容器位置 -
sticky在“未触发前”是relative行为，随文档流滚动；一旦触发（如top条件满足），才转为类似fixed的表现，但**仍受限于其最近的可滚动祖先边界** - 这意味着：如果导航条放在一个高度有限、带
overflow-y: auto的侧边栏里，它只会粘在那个侧边栏内部，而不是整个页面顶部
兼容性与降级处理要点
Chrome 56+、Firefox 59+、Safari 6.1+ 支持良好，但 iOS Safari 一直有历史 bug：比如在 body 上禁用弹性滚动（-webkit-overflow-scrolling: touch）可能让 sticky 失效；或页面初始加载时位置偏移。
立即学习“前端免费学习笔记（深入）”；
- 降级方案不是 JS 模拟，而是用
@supports区分：@supports (position: sticky) { .nav { position: sticky; top: 0; } } @supports not (position: sticky) { .nav { position: -webkit-sticky; top: 0; } } - iOS 旧版 Safari（body 直接设
sticky不稳定，建议把导航条包进一个明确高度的容器，并对该容器设overflow: visible - 不要依赖 JS 判断
getComputedStyle(el).position === 'sticky'，它在未触发时返回static，不可靠
div，而这个 div 自己就能滚动，那它只会粘在这个 div 里——哪怕你本意是让它粘满全屏。
