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，如果内容区本身不产生滚动，整个页面还是会全局滚动——这不是头部没固定，而是内容没“让出”滚动空间。
