因为position: fixed使导航栏脱离文档流，后续内容自动上移被遮盖；解决方法是给body或main添加padding-top（推荐）或margin-top，值等于导航栏实际高度，并配合box-sizing: border-box和媒体查询动态适配。
为什么 position: fixed 后导航栏遮住了页面内容？
直接给 <nav></nav> 加 position: fixed 很容易导致后续内容从顶部“往上跑”，被导航栏盖住——因为 fixed 元素脱离文档流，下面的元素会自动填补它原来的位置。
解决办法不是靠 JS 计算偏移，而是用纯 CSS 补一个等高的上边距：
- 给
或紧接在<nav></nav>后的第一个容器（比如<main></main>）加margin-top或padding-top，值等于导航栏高度 - 如果导航栏高度不固定（比如响应式下字号变化），优先用
padding-top配合box-sizing: border-box - 别用
top: 0+height: 60px然后只给 body 加 margin——万一导航有阴影、边框或内边距，实际占用高度可能大于 60px
如何让固定导航栏始终居顶且宽度占满视口？
position: fixed 默认相对视口定位，但必须显式声明尺寸和位置，否则可能收缩或错位。
关键样式组合：
-
top: 0和left: 0是必须的，不能只写一个 -
width: 100%——注意：这不是指父容器宽度，而是视口宽度；如果希望对齐内部内容（比如居中的max-width: 1200px容器），建议用width: 100vw更可靠 - 加上
z-index: 1000（或更高），避免被轮播图、弹窗等覆盖；低于 10 就可能失效
移动端下固定导航栏滚动时卡顿或闪烁怎么办？
iOS Safari 和部分安卓 WebView 对 fixed 元素渲染较弱，尤其在快速滚动时容易掉帧或闪动。
几个实测有效的优化点：
- 给
<nav></nav>加transform: translateZ(0)或will-change: transform，触发硬件加速（但别滥用，可能增加内存占用） - 避免在
<nav></nav>上设置半透明背景（如rgba(255,255,255,0.95)），改用backdrop-filter: blur(4px)配合纯白背景更稳 - 禁用
user-select: none或-webkit-touch-callout: none可能干扰滚动行为，除非真有必要，否则先去掉
要不要用 position: sticky 替代 fixed？
如果需求只是“滚动到顶部时才吸附”，position: sticky 更轻量、无遮挡风险、天然支持文档流，比 fixed 更适合多数场景。
但要注意兼容性和触发条件：
- 必须设置
top值（如top: 0），否则无效 - 父容器不能有
overflow: hidden或transform，否则 sticky 失效 - IE 完全不支持，iOS Safari 9.0+、Chrome 56+ 才稳定；如需兼容 IE，仍得回退到
fixed+ JS 监听 scroll - 滚动过程中若导航栏高度动态变化（比如搜索框展开），
sticky不会重算，而fixed需手动处理
height 和后续内容的 padding-top 没做同步响应式适配——PC 上好好的，一到手机就压住标题，得挨个断点检查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
