fixed头部遮挡内容是因为position:fixed使元素脱离文档流，后续内容从视口顶部开始渲染而与之重叠；解决需为.content设margin-top≥header实际高度，并用CSS变量或媒体查询适配响应式，再配合scroll-margin-top处理锚点跳转。
fixed 头部为什么一定遮挡内容
因为 position: fixed 让元素彻底脱离文档流，后续内容（比如 .main）会从视口顶部（y=0）开始渲染，而 fixed 元素也钉在 y=0 —— 两者物理重叠，不是“看起来遮住”，是真实层叠覆盖。浏览器不会自动给内容留空，这是 CSS 定位机制决定的，不是 bug。
content 怎么加 margin-top 才可靠
关键不是“加不加”，而是加得准、能维护：
-
.header必须有明确高度：用height: 60px或line-height: 60px+padding组合，避免依赖字体大小或行高浮动值 -
.content的margin-top必须 ≥ header 实际占用高度；若 header 高度响应式变化（如移动端折叠），需配合媒体查询：@media (max-width: 768px) { .content { margin-top: 48px; } } - 更健壮的做法是把偏移量抽成 CSS 变量：
:root { --header-height: 60px; }，然后.content { margin-top: var(--header-height); } - 不要对
.content同时设position: absolute或fixed，否则margin-top失效
scroll-margin-top 解决锚点跳转被遮问题
用户点击导航链接跳转到 #section-2 时，目标元素顶部刚好卡在 fixed 头部下方——这是 scrollIntoView() 默认行为。用 scroll-margin-top 主动预留空间：
- 给目标区块加样式：
#section-2 { scroll-margin-top: 60px; }（值应 ≥ header 高度） - 它只影响滚动定位，不影响布局流，也不需要 JS 干预
- 兼容性：Chrome 69+、Firefox 68+、Safari 15.4+；IE 不支持，但 IE 用户基本不会触发锚点滚动
- 注意：该属性对
scrollIntoView({ block: 'start' })生效，对block: 'center'无效
sticky 替代 fixed 的三个硬性条件
position: sticky 看似自动避让，但浏览器只在同时满足以下条件时才激活：
立即学习“前端免费学习笔记（深入）”；
- 元素本身设了
top值，例如top: 0 - 其**最近的滚动祖先容器**（通常是
.app或body）必须有overflow-y: auto或scroll，且设置了明确高度（height: 100vh、max-height或通过 flex 分配） - 该祖先容器不能被任何
overflow: hidden的父级截断（哪怕隔了两层 wrapper，也会让 sticky 失效）
最容易被忽略的是第三点：开发中临时给 body 加 overflow: hidden 弹出模态框，结果全站 sticky 全挂掉——这种失效无声无息，调试时得逐层检查 overflow 层级。
