最常见原因是漏写 top: 0 或 left: 0；fixed 元素不指定坐标则停在原始位置，且易受父容器 transform、overflow: hidden 等干扰而降级为 relative。
position: fixed加了但导航栏没贴顶
最常见原因是漏写了 top: 0 或 left: 0。position: fixed 不会自动锚定边缘，只脱离文档流；不指定坐标，它就停在原始位置（比如文档流中原本的 top 值）。
还要检查是否被父容器的 transform、overflow: hidden 或 will-change 干扰——这些会让 fixed 元素“降级”为 relative 定位。
建议直接用这组最小必要声明：
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 1000;
}
-
right: 0比width: 100%更可靠，能规避缩放、RTL 页面或 flex 父容器导致的宽度收缩 - 高度必须显式设为
px或clamp()，避免字体缩放后内容溢出或留白错位 -
z-index: 1000是底线，低于轮播图、弹窗等常见组件的默认层级（常为 999）就会被盖住
内容被导航栏遮住了怎么补白
fixed 导航栏脱离文档流，后续内容会“上移”顶替原位置，导致首屏文字被盖住。这不是 bug，是预期行为。
必须手动给主体区域预留空间，但方式有讲究：
- 优先用
padding-top（不是margin-top）作用于或主内容容器，避免触发重排 - 值必须严格等于导航栏的渲染高度（例如
60px），不能靠估算或百分比 - 如果导航高度响应式变化（如移动端折叠后变矮），
padding-top就会失准——此时应改用position: sticky或 JS 动态更新
position: sticky 为什么静默失效
sticky 不报错、不警告，只“假装没看见”，实际原因很具体：
- 父容器设置了
overflow: hidden、overflow: auto或任意transform（包括transform: translateZ(0)）→ 直接退化为relative - 父容器高度 ≤ 导航栏自身高度 → 滚动根本触不到
top: 0的临界点 - 导航元素是
display: inline或display: table→ sticky 只对块级、flex 或 grid 子项生效 - 没写双前缀：
position: -webkit-sticky和position: sticky必须同时存在，Safari 15.4 之前只认前者
验证方法：临时删掉父容器所有 overflow 和 transform 样式，再测试。
移动端软键盘弹出时导航乱跳
Android 上 fixed 导航随软键盘上浮，iOS 可能卡在半空——这是 viewport 缩放和滚动锚点差异导致的，不是代码写错了。
- 别监听
focus事件去切position: relative/fixed，时机难控且可能触发多次 - 更稳的做法：输入框 focus 时调用
element.scrollIntoView({ block: 'nearest' })主动微调视口 - 若必须隐藏导航，用
visibility: hidden，避免display: none引发重排抖动 - 真机调试不可替代：Chrome DevTools 远程调试 Android，Safari Web Inspector 连接 iOS，模拟器无法复现软键盘真实行为
固定导航真正难的不是“写出来”，而是让 top: 0 在缩放、软键盘、多层嵌套容器、字体加载延迟等所有现实场景下都精准咬合——每个像素偏移背后，都是浏览器对层叠上下文、视口计算和渲染管线的隐式约定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
