position: sticky 实现吸顶需满足 top 值、父容器无非 visible overflow、无干扰 margin/transform 等条件；语义上 header 应含标题、导航等，禁用纯样式包裹或广告；fixed 需配 padding-top 和 scroll-margin-top 防遮挡与锚点错位。
position: sticky 是现代项目中实现 <header> 吸顶的合理起点，但直接套用常失效——问题几乎都出在父容器或滚动上下文上。
为什么 <header> 加了 position: sticky 却不吸顶
它不是“写了就生效”的属性，而是一套有严格触发条件的布局行为：
- 必须显式设置
top值（如top: 0），缺省即无效 -
<header>的**直接父容器**不能有overflow: hidden、auto或scroll；常见于模态框关闭后遗留的body { overflow: hidden } - 若父容器是
display: flex或grid，且未设align-items: flex-start，<header>可能被“压扁”，失去粘性判断基准 -
<header>上方存在margin-top或transform元素，会破坏滚动上下文边界，导致粘性无法触发
快速验证：打开 DevTools → 选中 <header> → 查看 Computed 面板中 position 是否为 sticky；若是，但没效果，立刻往上查最近一个带非 visible overflow 的祖先节点。
<header> 里该放什么？哪些结构会直接破坏语义
<header> 不是“顶部横条”的样式容器，而是语义区块头部。放错内容会误导读屏器和搜索引擎：
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：含
<h1>的站点标题 +<nav>+ logo（带alt）+ 搜索框 - ✅ 合法：文章内
<section>开头的<h2>+<time>+ 作者信息 - ❌ 禁止：仅为了加背景色、固定定位、清浮动而包裹一层 —— 改用
<div class="site-header"> - ❌ 禁止：轮播图、广告 banner、登录弹窗按钮 —— 这些属于
<section>或纯<div>
语义错误不会影响吸顶功能，但会让可访问性和 SEO 失效，且后续维护时容易误删关键结构。
用 position: fixed 时，为什么内容被盖住、锚点跳转错位
因为 fixed 让 <header> 脱离文档流，后续内容从视口顶部开始渲染，自然被遮挡：
- 必须给
<main>或body加padding-top（值 = header 实际高度），否则首屏不可见 - 锚点跳转（如
#section2）错位，是因为浏览器按原始位置滚动，没考虑fixed占位；修复只需在目标元素上加scroll-margin-top: 60px（值同 header 高度） - 移动端 iOS Safari 中卡顿或闪烁，可加
transform: translateZ(0)强制 GPU 加速，或直接换回sticky
如果 header 高度不固定（比如响应式菜单展开后变高），padding-top 就会失效，此时硬编码数值不如改用 sticky 或 JS 动态计算。
移动端滚动卡顿、iOS Safari 中 header 消失怎么办
这不是 bug，而是渲染引擎对 position: fixed 的保守优化策略：
- 避免在
<header>内使用box-shadow、复杂渐变、大量子节点；DOM 越轻，重绘越稳 - 禁用
body { overflow: hidden }类操作，尤其与抽屉菜单共存时，极易触发渲染异常 - 优先尝试
position: sticky：它不脱离文档流，天然适配锚点、不遮内容、无 padding 陷阱，iOS Safari 9.2+ 已稳定支持 - 若必须用
fixed，且遇到快速滚动时 header 闪退，不要加will-change: transform这类过度提示，只加transform: translateZ(0)即可
真正难处理的从来不是“怎么写”，而是“谁在干扰滚动上下文”——多一层父容器，就多一个可能截断 sticky 的 overflow；少一个 scroll-margin-top，锚点就永远差一截。细节不在代码里，在 DOM 树的每一层约束中。
