sticky定位失效主因是父容器overflow非visible或未设top值，需确保最近可滚动祖先无overflow:hidden/auto/scroll且显式声明top，同时避免transform等创建新层叠上下文的属性。
sticky 定位为什么在顶部菜单上不生效
直接写
但导航条没停住，大概率是父容器“挡住了”——
要求最近的**有滚动行为的祖先容器**不能有
、
或
（除非该容器本身也在滚动），否则粘性失效。另外，
必须配合
（或
）值才起作用，只写
是无效的。
检查导航条父级（比如
或
position: sticky;stickyoverflow: hiddenoverflow: autooverflow: scrollstickytopbottomposition: sticky
）是否设置了
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”，其实逻辑完全不同：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
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
，不可靠
实际项目中最容易被忽略的是：**sticky 的“锚点”取决于滚动容器，而不是整个页面**。如果你把导航条塞进某个
div
，而这个
div
自己就能滚动，那它只会粘在这个
div
里——哪怕你本意是让它粘满全屏。