sticky不生效主因是父容器未设高度或未触发滚动上下文；需确保父容器有明确高度和overflow-y:auto，页眉加top-0，并避免transform等打断层叠上下文的属性。
sticky类为什么加了没反应
直接写 sticky 但页眉不粘住，大概率是因为父容器没设高度或没触发滚动上下文。sticky 不是绝对定位，它依赖「最近的有滚动行为的祖先容器」来计算是否粘住——如果父元素高度小于视口、或者父元素 overflow 是默认的 visible，那根本不会滚动，sticky 就永远不生效。
实操建议：
- 确保页眉的父容器（比如
<main></main>或<div class="h-screen overflow-y-auto">）设置了明确的高度和 <code>overflow-y: auto（Tailwind 中用h-screen overflow-y-auto） - 页眉本身必须加
top-0（或其他top-{n}），否则即使 sticky 也默认按文档流位置“粘”，视觉上无变化 - 避免给页眉父容器设
transform、perspective或filter，这些会创建新的层叠上下文，打断 sticky 的定位参考系 - 全屏单页应用，页眉就是最顶部：用
sticky top-0 - 页眉下方还有个固定工具栏（如调试栏），又不想遮挡：用
sticky top-12（假设工具栏高 3rem） - 移动端 Safari 地址栏缩放时会抖动：用
sticky top-safe-0（Tailwind v3.3+ 支持，需启用safe-area-insets插件） - 检查页眉所有父级元素的 class，删掉任何含
transform、scale、rotate、will-change的类 - 避免用
z-50+backdrop-blur组合——backdrop-blur在旧版 Safari 会强制创建新层叠上下文，导致 sticky 失效 - 如果必须模糊背景，改用
bg-white/80配合backdrop-saturate-50（兼容性更好）
top-0 和 top-4 在什么场景下该选哪个
top-0 表示粘在滚动容器顶部边缘，top-4 表示粘在距顶部 1rem（默认间距标尺）的位置。选哪个取决于你是否需要预留空间——比如页眉上方有固定导航栏、或者要避开浏览器地址栏阴影。
常见情况：
立即学习“前端免费学习笔记（深入）”；
sticky 在 Safari 上失效或跳动怎么办
Safari 对 sticky 的实现更严格，尤其在 iOS 上常出现首次滚动不粘、或滚动中突然脱离的问题。核心原因是 Safari 要求 sticky 元素的祖先链中不能有 will-change: transform、backface-visibility: hidden 这类触发合成层的属性，否则会禁用 sticky。
排查与修复：
如何让 sticky 页眉只在桌面生效、移动端取消
响应式粘性页眉很常见：桌面端希望一直看到导航，移动端则更倾向节省垂直空间，滑动时再唤出。Tailwind 的断点前缀可以直接控制 sticky 的开关。
写法示例：
<header class="sticky md:sticky top-0 md:top-4 z-40 bg-white"> <nav>...</nav> </header>
说明：
-
md:sticky表示仅在md及以上断点启用 sticky；小屏幕时自动退化为普通块级元素 -
md:top-4保证桌面端粘在合适位置，而小屏下top-0不生效，不会意外偏移 - 注意不要写成
sticky md:static——static不是 Tailwind 内置类，应直接省略小屏的 sticky
overflow-y 和 Safari 的层叠上下文限制，这两点卡住的人最多。
