只写 position: fixed 会出问题，因为 fixed 元素脱离文档流，后续内容从 y=0 开始渲染而被遮挡；需用 padding-top 或 scroll-margin-top 预留空间并配合 left:0/right:0 确保宽度健壮。
直接用 position: fixed + top: 0 + left: 0 + right: 0 实现固定，但必须同步处理内容遮挡——否则第一个 <main> 或 <div class="container"> 会直接顶到页面顶部，被导航栏盖住。
为什么只写 position: fixed 就出问题？
因为 fixed 元素完全脱离文档流，浏览器会把它当成“不存在”，后续元素按它没占空间的方式排布。结果就是：导航栏悬在顶部，下面的内容从 y = 0 开始渲染，视觉上被盖住。
- 常见现象：点击锚点链接（如
#about）跳转后，目标区块顶部刚好卡在导航栏下方看不见 - 不是 JS 滚动监听没生效，是 CSS 布局本身没预留空间
-
z-index再高也解决不了遮挡，它只管“谁在上面”，不管“谁该在哪儿”
给内容留白的两种可靠方式
核心是让导航栏下方的第一个块级容器“知道自己该往下挪多少”。推荐优先用 padding-top，比 margin-top 更稳定（避免 margin 塌陷）。
- 如果导航栏高度固定（比如 60px），直接在
body或主容器上加：padding-top: 60px - 如果用了 Bootstrap 5，给
<nav>加fixed-top类后，紧随其后的<main>或<div class="container">加pt-5（默认对应 3rem ≈ 48px），不够就换pt-xxl-4或自定义值 - 不推荐只靠
margin-top：父子元素间可能塌陷，尤其当父容器没边框/内边距时
解决锚点跳转时被遮挡的问题
即使留了 padding-top，点击 #contact 这类 ID 链接跳转后，目标元素顶部仍可能贴着导航栏下沿——因为浏览器默认把元素顶部对齐视口顶部。
立即学习“前端免费学习笔记（深入）”；
- 用
scroll-margin-top给目标元素“预设上边距”：#contact { scroll-margin-top: 60px; } - 这个值建议和导航栏高度一致，且支持响应式单位（如
3rem） - 注意兼容性：
scroll-margin-top在 Safari 15.4+、Chrome 69+、Firefox 97+ 支持，IE 完全不支持（但 IE 已淘汰）
容易被忽略的细节
真正上线时最常漏掉的不是 z-index，而是 left: 0 和 right: 0 搭配使用——只写 width: 100% 会在某些 box-sizing 或 border 场景下导致横向滚动条或右侧微小溢出。
-
left: 0; right: 0;比width: 100%更健壮，自动适应父容器 padding 和 box-sizing 变化 - 如果导航栏有阴影或 border，
z-index至少设为1000，避免被其他定位元素（如弹窗、广告位）压住 - 移动端测试时别只看 Chrome DevTools 模拟器，真机滑动惯性可能导致
fixed元素短暂闪烁，加transform: translateZ(0)可触发硬件加速缓解
