fixed头部遮挡内容的根本原因是position: fixed使元素脱离文档流，导致后续内容从视口顶部开始布局而非头部下方；需同时处理布局、安全区和滚动行为三重影响，并用scroll-margin-top解决锚点跳转遮挡问题。
fixed头部遮挡内容的根本原因
不是写错了样式，而是 position: fixed 会让元素完全脱离文档流——浏览器渲染后续内容时，根本“看不见”这个头部，直接从视口顶部开始布局，自然就叠在下面了。
这跟 z-index 无关，调再高的层级也解决不了；遮挡是布局逻辑决定的，不是层叠顺序问题。
移动端必须处理的两个叠加问题
除了脱离文档流，移动端还有两个固定头部特有的干扰项：
- iOS Safari 的安全区域（刘海/传感器区）会让
top: 0的 fixed 元素被物理裁切，哪怕没遮正文，自己先被截了 - 地址栏收起/展开时触发重排，iOS 15+ 会临时丢掉 fixed 定位，造成跳动或短暂消失
所以光加 padding-top 不够，得同时应对布局、安全区、滚动行为三重影响。
立即学习“前端免费学习笔记（深入）”；
最稳妥的 padding-top 设置位置和方式
别往 body 上硬加 margin-top——外边距合并会让它失效或错位；也别只靠父容器占位（比如套个 .header-wrapper），高度难同步，响应式下容易露馅。
推荐做法：
- 把
padding-top加在主内容容器上，比如main或.content，而不是body - 值用 CSS 自定义属性统一管理：
padding-top: var(--header-height) - 配合媒体查询动态改
--header-height，比如桌面端72px、小屏48px - 若头部高度受字号缩放影响，用
clamp(48px, 8vw, 72px)替代固定像素
锚点跳转时内容仍被盖住？补 scroll-margin-top
用户点 #section-2 跳过去，标题还是顶到屏幕最顶——因为 scrollIntoView 默认贴边对齐，不认 fixed 头部。
解决方法很简单，不用 JS：
- 给目标元素加
scroll-margin-top: var(--header-height) - 确保这个值和前面
padding-top用的是同一个自定义属性，保持一致 - 注意：这个属性不继承，每个需要跳转的区块都得单独设
复杂点在于，iOS Safari 对 scroll-margin-top 支持较晚（iOS 15.4+），旧版本要降级用 JS 监听 scroll + getBoundingClientRect() 手动微调，但绝大多数场景下纯 CSS 已足够。
