sticky在tailwind中不生效，90%是父容器未提供有效滚动上下文：高度为0、overflow非visible、或触发新层叠上下文（如transform/filter），导致sticky无法绑定可滚动祖先。
直接说结论：sticky 在 Tailwind 中不生效，90% 不是类写错了，而是父容器“没资格当滚动上下文”——它要么高度为 0，要么被 overflow 截断，要么悄悄创建了新层叠上下文。
父容器没高度或内容没溢出
浏览器只在“有真实滚动能力”的容器里激活 sticky。如果父容器计算高度是 0px（比如 flex: 1 但上层没设 min-height），或者子内容总高度 ≤ 容器高度，那就根本不会触发滚动，sticky 连尝试都不会做。
- 临时验证：给父容器加
min-height: 1px或border: 1px solid red，看是否突然生效 - 生产环境推荐用
min-h-96或max-h-96 overflow-y-auto，而不是h-96 - 避免
height: 100vh—— 它会锁死容器高度，让内容撑不开，sticky只能在前一屏工作，滚下去就失效
祖先元素用了 overflow:hidden/auto/scroll
sticky 向上找“最近可滚动祖先”，一旦遇到任意一层写了 overflow: hidden、auto 或 scroll，哪怕那层当前没滚动条，也会立刻截断查找链，sticky 直接退化为 static。
- 常见陷阱：外层
div加了overflow-x-hidden做布局裁剪；UI 组件（如 Modal、Card）内部自带overflow - DevTools 里逐级点开父节点，在 Computed 面板查
overflow的最终值，重点盯hidden - 必须保留
overflow？加一层relative包裹：<div class="overflow-auto"><div class="relative"><div class="sticky top-0">...</div></div></div>
父容器或 sticky 元素自身触发了新层叠上下文
transform、filter、will-change、perspective 这些属性会让元素创建新层叠上下文，从而切断 sticky 与滚动容器的关联。
- Tailwind 中典型诱因：
hover:scale-105、blur-sm、rotate-0、backdrop-blur - 表格场景更敏感：
<th> 父级若用了 <code>inline-flex或inline-grid，连 BFC 都不产生，sticky从解析阶段就被忽略 - 检查方式：选中元素 → DevTools 的 Computed → 查
position是否还是sticky；如果不是，再查是否有上述触发属性 - 必须给每个
<th> 单独加 <code>sticky top-0 z-10 bg-white（bg-white是硬性要求，防透底） - 包裹容器必须同时满足：
overflow-x-auto（横向滚动） +max-h-96（纵向滚动锚点） - 加
table-fixed并统一列宽（如w-32或min-w-[120px]），否则<thead> 和 <code><tbody> 列宽自动计算不一致，导致错位 <li>移动端 Safari 要求更高：<code>z-50起步，min-h-[400px]替代h-[400px]，必要时启用top-safe-0插件
table 表头 sticky 失效的特殊原因
给 <thead> 加 <code>sticky top-0 永远无效——浏览器不认语义容器，只认每个 <th> 单元格。而且原生表格对 <code>sticky 支持极苛刻，稍有偏差就错位或闪烁。
真正难调试的从来不是 sticky top-0 写没写对，而是你根本不知道它在哪一层被静默拦截了——父容器高度、祖先 overflow、层叠上下文、表格渲染机制，四者任一出问题，sticky 就不声不响地失效。动手前，先打开 DevTools Layout 面板看父容器有没有真实高度，再顺着 DOM 往上扫一遍 computed overflow 和 transform，比反复改 class 高效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
