必须为body或主容器设置padding-top留白以避免遮挡，值等于固定头部高度；iOS Safari需加transform: translateZ(0)缓解跳动；优先用sticky实现吸顶，失效时用JS监听scroll切换fixed并补margin-top防抖动。
用 position: fixed 实现头部固定，但必须处理页面内容被遮挡问题
直接给 <header> 加 position: fixed 是最常见做法，但新手常忽略：固定后它脱离文档流，后面的内容会从顶部“顶上来”，导致第一屏文字被盖住。
解决方法不是靠猜，而是加一层等高留白：
- 给
<body>或紧接在<header>后的主容器（如<main>）设置margin-top或padding-top，值等于<header>的实际高度（比如60px） - 更稳妥的做法是给
<header>设明确高度（如height: 60px），避免依赖内容撑开导致计算偏差 - 别用
top: 0+width: 100%就以为完事——如果页面有横向滚动，width: 100%可能窄于视口，需补left: 0; right: 0;
移动端 Safari 下 position: fixed 滚动时闪动或失效
iOS 15+ 之前版本对 fixed 元素的合成层处理不一致，尤其在地址栏收起/展开时，头部可能跳动甚至短暂消失。
这不是 bug，是 Safari 的滚动优化机制所致。缓解方案有限但有效：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
<header>强制开启硬件加速：transform: translateZ(0)或will-change: transform - 确保父容器没有
overflow: hidden或-webkit-overflow-scrolling: touch（后者已废弃，但旧项目里还可能残留） - 避免在
<header>内使用backdrop-filter（毛玻璃）+fixed组合，iOS 上极易触发渲染异常
用 sticky 替代 fixed 更自然，但兼容性要兜底
position: sticky 是语义更准确的选择：它只在滚动到临界点时才“吸顶”，不脱离文档流，天然避免遮挡问题。
但它不是万能的，要注意这些限制：
- 必须设置
top值（如top: 0），否则无效 - 父容器不能有
overflow: hidden、overflow: auto或transform等会创建新层叠上下文的属性，否则sticky失效 - IE 完全不支持，Edge 15+ 才开始支持；如需兼容 IE，得用 JS 监听
scroll手动切fixed类名 - 在 flex 或 grid 容器中，某些老版 Chrome 对
sticky支持不稳定，建议外层套一层普通<div>
固定头部时，z-index 不是越高越好
很多人一上来就写 z-index: 9999，结果引发新问题：下拉菜单、弹窗、Tooltip 全被压在下面，或者和第三方组件（如地图 SDK）的层级冲突。
合理管理层级的关键是分层设计：
- 把
<header>的z-index控制在100左右（如z-index: 100） - 弹窗类组件设
z-index: 1000，Tooltip 设z-index: 200，形成可预期的叠加顺序 - 绝对不要用
z-index: 999999这种“防君子不防小人”的写法——一旦第三方库也这么写，就只能靠 !important 硬刚，后续维护成本陡增
固定头部看着简单，真正落地时，fixed 和 sticky 的选择、移动端渲染行为、层级管理这三处最容易反复调试。尤其是 sticky 在复杂布局里的失效，往往不是代码写错，而是某个看不见的父元素悄悄创建了新的层叠上下文。
