position: fixed 使头部脱离文档流，导致后续内容从顶部渲染而被遮挡，需用 margin-top 或 padding-top 补偿；其定位相对于视口，不感知父容器边界。
为什么 position: fixed 会让头部脱离文档流，导致内容被遮挡
用 position: fixed 固定头部后，它会完全脱离正常布局流，后续内容会“无视”它的存在，从页面顶部开始渲染，结果就是第一屏内容被盖住。
- 必须手动给主体内容加
margin-top或padding-top，值至少等于头部高度 - 如果头部高度不固定（比如响应式字号变化、多行标题），硬写死像素值会出错
-
fixed元素默认相对于视口定位，滚动时无法感知父容器边界（比如只在某个弹窗内滚动）
position: sticky 的触发条件和常见失效原因
sticky 看似理想，但实际中经常“不粘”——不是 bug，是没满足前提条件。
- 父容器不能有
overflow: hidden、overflow: auto或overflow: scroll，否则粘性失效 - 必须设置有效的
top（或bottom）值，例如top: 0；设成top: auto或不设，等于没开 sticky - 仅对「块级盒」生效，如果父元素是
display: flex或display: grid，子项需确保自身是块级（如加display: block） - 不支持 IE，Safari 旧版本对
sticky在table或flex子项中的行为不稳定
滚动内容区域需要明确高度或溢出控制
无论用 fixed 还是 sticky，如果内容区本身不产生滚动，整个页面还是会全局滚动——这不是头部没固定，而是内容没“让出”滚动空间。
- 给内容容器设
height+overflow-y: auto，让它内部滚动（推荐用于弹窗、卡片等局部场景） - 若要整页滚动，内容区无需设高，但必须确保它不被头部遮挡（
fixed下靠margin-top；sticky下靠自然流） - 避免在内容区父级上误加
overscroll-behavior: contain，它可能抑制滚动传递，导致拉不到底
响应式头部固定要注意的两个细节
移动端折叠菜单、字号缩放、横竖屏切换，都会影响头部高度计算和粘性表现。
- 用
top: env(safe-area-inset-top)替代固定top: 0，适配 iPhone 刘海/安卓状态栏 - 慎用
vh单位设头部高度：iOS Safari 滚动时100vh会包含地址栏，造成高度抖动；优先用px、rem或fit-content - 如果用 JavaScript 动态调整
top值（比如监听resize），注意防抖，否则频繁重排影响性能
真正难的不是选 fixed 还是 sticky，而是当它们和 flex 布局、iframe 嵌套、第三方 UI 库（比如 Ant Design 的 Layout.Header）混用时，谁在截断滚动、谁在重置定位上下文——这时候得一层层查 getComputedStyle 和滚动祖先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
