固定导航栏遮挡内容的根源是position: fixed脱离文档流，解决关键是让内容区域主动避开导航栏空间；推荐body padding-top预留空间（兼容性最好）和scroll-padding-top统一锚点偏移（现代标准），并注意z-index生效条件与层叠上下文。
固定导航栏遮挡内容，不是 CSS 失效，而是 position: fixed 脱离文档流后，后续元素“不知道”上面有个导航栏——它从视口顶部开始渲染，自然被盖住。解决的关键不是“推内容”，而是让内容区域主动避开导航栏占用的空间。
body padding-top 预留空间（最稳、兼容性最好）
这是最直接、浏览器兼容性最好的做法，适用于导航栏高度固定（比如 72px、80px）的场景。
- 必须用
padding-top，不是margin-top：margin-top在body上容易和子元素外边距折叠（margin collapse），padding-top更可靠 -
padding-top值应严格等于导航栏的总高度（含border和padding，不含margin） - 记得给导航栏显式声明
top: 0和height，否则高度难估算
示例：
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 72px;
z-index: 1000;
}
<p>body {
margin: 0;
padding-top: 72px; /<em> 关键 </em>/
}</p>
scroll-padding-top 统一锚点滚动偏移（现代标准，推荐）
当用户点击 #Features 这类锚点跳转时，浏览器默认把目标元素顶部对齐视口顶边，结果被导航栏挡住。scroll-padding-top 是 W3C 标准方案，专治这个。
- 必须设在
html元素上（滚动容器是根元素，不是body） - 值建议用 CSS 自定义属性，方便响应式调整：
var(--navbar-height) - 注意：Safari 15.4+ 才支持
calc(60px + env(safe-area-inset-bottom))；旧版需分两行写
示例：
:root {
--navbar-height: 80px;
}
html {
scroll-padding-top: var(--navbar-height);
}
@media (max-width: 768px) {
:root { --navbar-height: 60px; }
}
section scroll-margin-top（按需设置，精准控制）
如果你只希望某些特定区块（如 id="Pricing"）在锚点跳转时不被遮挡，而不是全局统一处理，就用这个。
- 作用对象是目标元素本身（比如
section或div[id]），不是根元素 - 值≈导航栏高度，但要实测：太小仍会遮挡，太大导致空白过多
- IE 完全不支持，需配合
@supports降级或不用
示例：
section {
scroll-margin-top: 80px;
}
z-index 和层叠上下文（常被忽略的遮挡根源）
有时候内容没被“盖住”，而是下拉菜单、弹窗、轮播图等组件被导航栏压住——这往往不是定位问题，而是 z-index 生效条件没满足。
-
z-index只对position不为static的元素生效（常见漏写position: relative） - 父容器若创建了新的层叠上下文（比如有
opacity 、<code>transform、filter），子元素的z-index就只在该上下文内有效 - 导航栏的
z-index: 1000很高，但若它的父容器有transform: translateZ(0)，而弹窗没设position，那弹窗就永远在下面
真正要检查的不是数值大小，而是“谁在哪个层叠上下文中”。
实际项目里，body padding-top 和 scroll-padding-top 组合用得最多；但一旦出现“明明 z-index 更大却还是被盖”的情况，就得顺着 DOM 往上查层叠上下文——那才是最常被跳过的调试环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
