sticky top-0不生效主因是父容器overflow非visible或未触发滚动上下文；需确保父容器overflow为visible、有足够高度、未设transform/filter，且页眉明确设top值并配合适当z-index。
直接加 sticky top-0 不一定生效，关键得看父容器是否“放行”、页头是否有明确偏移参考、以及是否被层叠上下文或滚动限制打断。
为什么 sticky top-0 在页头没反应
最常见原因是上级容器（包括 body）设置了 overflow: hidden、overflow: auto 或 overflow: scroll。position: sticky 的定位参考是「最近的可滚动祖先」，一旦这个祖先被 overflow 截断，粘性就失效。
- 用浏览器开发者工具检查页头所有父级元素，重点看
body、main、div.layout这类包裹容器的overflow值，确保为visible（默认值） - 如果必须设
overflow: hidden（比如做动画遮罩），别硬扛sticky，改用fixed+ 手动监听scroll控制显隐 -
sticky必须配合top（或bottom）才起作用，只写sticky不设top是无效的
top-0 和 top-4 该怎么选
top-0 表示粘在可滚动容器顶部边缘，top-4 表示粘在距该顶部边缘 1rem 的位置。选哪个取决于你是否需要预留空间。
- 全屏单页应用，页头就是视觉最顶部 → 用
sticky top-0 - 页头上方有固定调试栏、通知横幅，或要避开移动端 Safari 地址栏阴影 → 用
sticky top-4或sticky top-12（按实际高度换算） - 需兼容 iOS 15.4 以下设备 → 启用
safe-area-insets插件后，优先用sticky top-safe-0，避免地址栏缩放抖动
粘住后内容被遮挡怎么办
sticky 元素仍占据原始文档流位置，只是视觉上“浮”上去，后续内容不会自动下移——这是正常行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 给紧接在页头下方的元素加
mt-16（假设页头高 4rem），数值必须等于页头高度 - 避免用 JS 动态计算高度；CSS 中用
mt-[64px]或mt-calc(4rem+0.5rem)更稳定 - 如果页头高度不固定（如多行文字、响应式折叠），用
pt-16+box-sizing: border-box配合伪元素占位，比监听resize更轻量
移动端 Safari 和 z-index 的坑
iOS 旧版（尤其 13–14）对 sticky 触发更苛刻：必须同时满足 top、z-index、父容器有 min-height，否则回退成 static。
- 始终为页头显式设置
z-50或更高（如z-1000），防止被其他层遮住 - 父容器避免写
h-full或h-100%，改用min-h-screen，防止 Safari 因高度计算失败禁用 sticky - 不要给页头父容器加
transform、perspective或filter，这些会创建新层叠上下文，打断 sticky 的定位参考系
真正卡住人的往往不是类名拼错，而是父容器悄悄加了 overflow: hidden，或者忘了 z-index 在 iOS 上必须和 top 同时存在才生效。
