用 position: sticky + top: 0 可实现导航栏贴顶，但常因父容器无滚动能力、祖先元素含 transform/filter 等属性或 sticky 元素缺失定位值而退化为 static。
直接说结论：用 position: sticky + top: 0 就能实现，但绝大多数失效不是写错了，而是布局上下文没配对。
为什么写了 position: sticky 却没反应
浏览器根本没把它当 sticky 处理——它悄悄退化成 position: static。常见原因有三个：
- 父容器没滚动能力：比如没设
height或max-height，也没配overflow: auto或scroll - 祖先元素加了
transform、filter、perspective或contain: layout——哪怕值是transform: translateY(0)，也会中断 sticky 感知 - sticky 元素自己漏了
top、bottom、left、right中任意一个（top: 0最常用）
导航栏要真正“贴顶”，父容器怎么配
别指望 body 或 html 默认撑满视口——它们默认高度为 0，overflow 无效。必须显式声明：
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100vh;
overflow-y: auto;
}
然后把导航栏放进去：
✅ 正确：<div class="container">
<header class="nav">...</header><main>...</main>
</div>
❌ 错误：导航栏直接挂 body 下，或父容器是 display: flex 但没设 align-items: flex-start，导致 top: 0 参照点偏移
移动端和 Flex/Grid 布局里特别容易翻车
Safari 和部分安卓 WebView 对 sticky 更敏感，尤其在以下场景：
- Flex 容器中，sticky 元素被
align-items: stretch拉高 → 加align-self: flex-start - Grid 容器中，sticky 元素落在
1fr行里被撑开 → 加justify-self: start - 键盘弹出时视口高度突变，
top: 64px变成悬空 → 改用top: 4rem或top: 5vh，避免硬编码像素值 - 侧边栏或二级导航想紧贴 header 下方吸附 →
top值必须等于 header 高度（含 border/padding），不能靠 JS 算offsetTop，因为 sticky 后该值不更新
检查是否真生效的最快方法
打开 DevTools，选中导航栏元素，在 Computed 面板里搜 position，确认最终解析值是 sticky 而非 static 或被其他规则覆盖；再看 top 是否有计算后的数值（比如 0px）。如果没看到，说明某条硬性条件没满足——大概率是祖先节点偷偷加了 transform，或者父容器根本没滚动区。
复杂点永远不在 position: sticky 这行代码本身，而在它上面三层 DOM 节点的样式链里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
