页眉 sticky top-0 不生效主因是父容器未建立滚动上下文：需设明确高度（如 h-screen）和 overflow-y-auto；避免 transform/filter 等触发新层叠上下文；iOS 用 top-safe-0 更稳妥。
加了 sticky 和 top-0 页眉还是不粘？大概率不是 Tailwind 的问题，而是滚动上下文没建立起来——sticky 不是“自动粘”，它只在「有滚动行为的父容器」里才生效。
为什么 sticky top-0 在 Safari 或 Chrome 里完全没反应
最常见原因是父容器既没设高度，也没触发滚动。比如你把页眉直接放在 下，而 body 的 overflow-y 是默认的 visible，整个页面靠自然流撑高，根本不会产生滚动条，sticky 就永远等不到“滚动到临界点”的那一刻。
- 确保页眉的**直接父容器**（比如
<main></main>或一个包裹用的<div>）设置了 <code>h-screen或明确高度，并启用overflow-y-auto - 页眉自身必须带
top-0（或top-4等偏移），否则即使 sticky 生效，也会“粘”在原始文档位置，视觉上毫无变化 - 检查父容器是否用了
transform、will-change、filter或perspective——这些会创建新层叠上下文，Safari 直接禁用 sticky - 全屏单页应用、无顶部固定栏：优先用
sticky top-0 - 页眉上方有固定导航栏（如调试栏、状态栏）：改用
sticky top-12（假设高 3rem） - 目标用户含大量 iOS 用户，且页眉内容不能被地址栏遮挡：启用插件后用
sticky top-safe-0 - 别混用
top-0和top-safe-0，后者只在支持 safe area 的环境生效，降级时会回退到top-0 <tbody> 要限制高度并开启 y 向滚动：<code>max-h-96 overflow-y-auto，否则内容撑高整个表格，失去“固定表头+滚动内容”的效果- 绝对不要给外层
overflow-x-auto容器加transform类（如scale-100），否则 Safari 会直接忽略所有 sticky 行为
top-0 和 top-safe-0 该选哪个
top-0 表示紧贴滚动容器顶部；top-safe-0（Tailwind v3.3+，需启用 safe-area-insets 插件）则会自动避开 iOS 地址栏和底部安全区，在 Safari 移动端更稳。
表格内表头固定时 sticky 为何失效
给 <thead> 加 <code>sticky top-0 很容易失败，因为 <table> 本身不是块级容器，且浏览器对表内元素的 sticky 支持差异大（Safari 15.4+ 才较可靠）。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>正确做法：用 <code><div class="overflow-x-auto"> 包住整张表，再给 <code><th> 单独加 <code>sticky top-0 bg-white z-10
真正卡住人的地方往往不是类名写错，而是滚动容器的 overflow 和 height 没配对，或者父级无意中触发了新层叠上下文——这两点在 Safari 上尤其敏感，调的时候建议先删掉所有 transform/filter 相关类，再一层层加回去验证。
