sticky top-0 不生效主因是滚动上下文缺失或层叠被中断：父容器须设明确高度与 overflow-y-auto，禁用 transform/filter/will-change，表格需为每个 th 加 sticky top-0 z-10 且列宽统一。
直接写 sticky top-0 却没反应？90% 是因为滚动上下文缺失或层叠被意外打断，不是类名写错了。
为什么 sticky top-0 在导航栏上不生效
Sticky 不是“一加就吸顶”，它依赖父容器提供可滚动上下文。如果导航栏的直系父容器是 body 或一个未设高度/溢出的 div，浏览器根本不会触发粘性行为。
- 父容器必须有明确高度（如
h-screen、max-h-[600px]）且设overflow-y-auto - 避免给父容器加
transform、filter、will-change—— Safari 会直接禁用 sticky -
overflow-x-hidden在body或 layout 级容器上也可能阻断，只在必要包裹层设overflow-y-auto - 必须显式写
top-0（或top-4等），仅sticky不生效
表格表头固定：不能只给 thead 加 sticky
浏览器不把 thead 当作 sticky 的作用目标；真正要粘住的是每个 th 单元格。
- 给每个
th加sticky top-0 z-10 bg-white，而非thead - 外层容器必须同时满足：
max-h-96 overflow-y-auto table-fixed - 列宽必须统一：为每个
th和对应td设相同宽度（如w-32或min-w-[120px]） - 移动端 Safari 15.4 以下版本要求更严：用
min-h-[400px]替代h-[400px]，并显式声明z-50
移动端 Safari 表头闪动或吸顶失效
iOS 对 sticky 触发条件更苛刻，尤其在地址栏缩放或安全区处理不当的时候。
立即学习“前端免费学习笔记（深入）”；
- 优先用
top-safe-0（需启用@tailwindcss/safe-area-insets插件），不要和top-0共存 - 确保
th没被flex、block类覆盖默认display: table-cell（Firefox 下会直接失效） - 若表格超宽，外层容器还需加
overflow-x-auto，且不能设user-select: none或pointer-events: none，否则 iOS 会拦截 touch 拖拽 - React/Vue 中重渲染可能重置
scrollLeft，需用 ref 手动保存恢复，或改用 Grid/Flex 模拟表格布局
最易被忽略的一点：sticky 的生效与否，几乎完全取决于祖先容器是否“被浏览器认定为可滚动锚点”——它不看视口，只看离它最近的那个有 overflow-y: auto 且高度足够、未被合成层隔离的块级父元素。
