顶部固定导航遮挡内容的解决核心是让主体内容下移留出导航高度空间，最稳妥方式是在body或main上用padding-top配合CSS自定义属性和媒体查询动态适配，并通过scroll-margin-top修复锚点跳转遮挡问题。
顶部固定导航遮挡内容，本质是 position: fixed 的导航脱离文档流，导致后续内容从页面顶部开始渲染，被导航盖住。解决核心是：让主体内容“下移”，留出导航高度的空间。
用 padding-top 给主体内容腾位置
最常用、最稳妥的方式是在 或主容器（如 ）上加 padding-top，值等于导航栏高度。
- 假设导航高 60px，就写：
padding-top: 60px; - 若导航高度响应式变化（比如移动端变矮），
padding-top也得跟着变 —— 这就是媒体查询的用武之地 - 注意：不要用
margin-top，它可能引发外边距合并或布局意外；padding更可控
配合媒体查询适配不同屏幕
导航栏在桌面端可能是 72px，平板缩为 60px，手机再缩到 48px。对应地，主体区域的 padding-top 也要分层设置：
@media (min-width: 1024px) {
main { padding-top: 72px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
main { padding-top: 60px; }
}
@media (max-width: 767px) {
main { padding-top: 48px; }
}关键点：媒体查询中的断点和 padding 值，必须与导航栏实际高度严格一致。建议把导航高度抽成 CSS 自定义属性，方便统一维护：
立即学习“前端免费学习笔记（深入）”；
:root {
--nav-height: 72px;
}
@media (max-width: 1023px) { :root { --nav-height: 60px; } }
@media (max-width: 767px) { :root { --nav-height: 48px; } }
main {
padding-top: var(--nav-height);
}
避免常见坑：别忘了 box-sizing 和滚动条
如果主体内容设置了 height: 100vh 或 min-height: 100vh，又加了 padding-top，可能导致整体高度超屏、出现多余滚动条。
- 确保
box-sizing: border-box已全局设置（推荐），这样padding不会额外撑高元素 - 若用
100vh，可改用calc(100vh - var(--nav-height))控制最大高度 - 测试时拉宽/缩窄窗口，观察是否偶发遮挡或空白——那是媒体查询断点没对齐或 JS 动态改高后未同步更新 padding
进阶：用 CSS `scroll-margin-top` 配合锚点跳转
当用户点击页内链接（如 #section2）跳转时，固定导航常会把标题顶到屏幕最顶，被遮住。这时不用 JS，纯 CSS 就能修正：
h2[id] {
scroll-margin-top: var(--nav-height);
}浏览器滚动到该标题时，会自动预留出导航高度的上边距，确保标题清晰可见。这个属性兼容性良好（Chrome 69+、Firefox 68+、Safari 15.4+），值得默认开启。
基本上就这些。核心就一条：导航多高，内容就让多高；变高变矮，padding 和 scroll-margin 都跟着变量走。不复杂但容易忽略细节。
