导航栏固定后内容被遮挡是因为fixed脱离文档流导致后续元素上移；应给首个内容容器加padding-top腾出空间，而非依赖margin或body padding，并用scroll-margin-top解决锚点跳转遮挡问题。
直接加 position: fixed 会导致主体内容被盖住，这不是 bug，是 fixed 的正常行为；真正要做的，是给主体“腾出空间”，而不是反复调 position 或 z-index。
为什么导航栏固定后内容会被遮挡
因为 position: fixed 让导航脱离文档流，后续元素会直接顶到视口顶部——它没消失，只是“不占位”了。你看到的遮挡，其实是内容自己上移了，不是导航压下去的。
- 常见错觉：以为加了
top: 0就万事大吉，但漏掉空间补偿 - 更隐蔽的问题：用
margin-top给主体加间距，结果在响应式切换时高度不匹配（比如移动端 navbar 变高） - 别在
<body>上设padding-top后又用 JS 动态改 navbar 高度——padding 不会自动同步
推荐做法：给首个内容容器加 padding-top
比全局 <body> padding 更可控，尤其适合 Bootstrap 或自定义高度 navbar。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 查真实高度：打开开发者工具，运行
getComputedStyle(document.querySelector('nav')).height，拿到像素值（比如"68px"） - 写死在第一个内容块上：
<main style="padding-top: 68px;">，或用 class 如pt-5（Bootstrap 中pt-5≈ 3rem = 48px，不够就选pt-6） - 避免混用：
mt-*和pt-*别同时加，否则间距翻倍 - 如果导航里有下拉菜单，确保父级
<li>设了position: relative，否则position: absolute子菜单会飘到页面任意位置
锚点跳转时内容仍被遮挡？用 scroll-margin-top
点击链接跳到 #section2，结果标题卡在导航底下——这是滚动定位默认贴边导致的，和初始布局无关。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top，值略大于导航实际高度，比如scroll-margin-top: 72px - 不要写成
margin-top，后者影响布局，scroll-margin-top只作用于滚动对齐 - 注意兼容性：Chrome 89+、Firefox 90+、Safari 15.4+ 支持；旧版 Safari 可降级为 JS
scrollIntoView({ block: 'start', behavior: 'smooth' })+ 手动偏移
最易忽略的一点：移动端软键盘弹出时，position: fixed 在部分 Android 浏览器中会失效或抖动，此时不能只靠 CSS——得监听 resize 或 focusin 事件做兜底修正，但那是另一层问题了。
