导航栏固定后内容被遮挡是因为fixed脱离文档流导致后续元素上移；应给首个内容容器加padding-top腾出空间，而非依赖margin或body padding，并用scroll-margin-top解决锚点跳转遮挡问题。
直接加 position: fixed 会导致主体内容被盖住，这不是 bug，是 fixed 的正常行为；真正要做的，是给主体“腾出空间”，而不是反复调 position 或 z-index。
为什么导航栏固定后内容会被遮挡
因为 position: fixed 让导航脱离文档流，后续元素会直接顶到视口顶部——它没消失，只是“不占位”了。你看到的遮挡，其实是内容自己上移了，不是导航压下去的。
- 常见错觉：以为加了
top: 0就万事大吉，但漏掉空间补偿 - 更隐蔽的问题：用
margin-top给主体加间距，结果在响应式切换时高度不匹配（比如移动端 navbar 变高） - 别在
上设padding-top后又用 JS 动态改 navbar 高度——padding 不会自动同步
推荐做法：给首个内容容器加 padding-top
比全局 padding 更可控，尤其适合 Bootstrap 或自定义高度 navbar。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 查真实高度：打开开发者工具，运行
getComputedStyle(document.querySelector('nav')).height，拿到像素值（比如"68px"） - 写死在第一个内容块上：
<main style="padding-top: 68px;"></main>，或用 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 事件做兜底修正，但那是另一层问题了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
