sticky在tailwind中失效主因是祖先容器截断滚动上下文，需逐层检查overflow、transform等属性；thead不响应sticky，必须作用于th并配table-fixed、显式列宽及z-50。
为什么sticky在Tailwind里写了却没反应
不是你漏写了top-0，而是sticky行为被祖先容器悄悄截断了。Tailwind本身不干预逻辑，但它的类（比如overflow-hidden、h-screen、flex）常在不经意间触发sticky失效条件——浏览器直接把元素当position: static处理，DevTools里position显示为static就是铁证。
- 检查所有父级直到
body：用DevTools「Computed」面板逐层点开，盯紧overflow-x和overflow-y的计算值，重点排查.ant-modal外层、Tab容器、轮播壳、或CSS-in-JS注入的内联overflow: hidden - Tailwind中常见“凶手”：
overflow-hidden、h-screen（等价于height: 100vh）、max-h-96配错高度、flex容器没设min-h-screen - 临时验证法：给疑似父级加
!overflow-visible（或手写overflow: visible !important），如果sticky立刻恢复，问题就定位准了
table里thead加sticky top-0为啥不动
因为thead不是渲染节点，浏览器不把它当sticky作用目标。真正要粘住的是每个th单元格，且必须配合滚动容器+列宽控制，否则即使生效也会错位。
- 必须给每个
th单独加sticky top-0 z-50（z-10在复杂层叠下常不够） - 包裹表格的容器得有明确高度和滚动能力：
max-h-96 overflow-y-auto，不能只靠h-full或min-h-96 - 加
table-fixed，再给每个th和对应td设相同宽度（如w-32或min-w-[120px]），否则列宽自动计算会导致表头和内容错开 - 避免
transform、filter、will-change出现在任何祖先上——Safari尤其敏感，会破坏sticky边界
必须保留overflow-hidden时怎么救活sticky
业务场景里常要裁剪圆角图片、防止弹窗溢出，硬删overflow-hidden不可行。替代方案不是妥协，而是绕过规范限制。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
clip-path: inset(0)替代overflow-hidden：视觉效果一致，但不创建新BFC，sticky链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+支持） - 加一层
relativewrapper：div套在带overflow-hidden的容器外面，设relative，再把sticky元素挂进去 - 若必须用
overflow-auto（比如局部滚动区域），确保该容器实际内容高度真超出设定高度——用DevTools Layout面板看「Actual height」，别信h-full这种虚高
Flex/Grid父容器让sticky失效的隐藏陷阱
没写overflow也不代表安全。Flex或Grid容器若配置不当，会静默破坏sticky所需的块格式化上下文（BFC）或顶部基准线。
-
flex容器设了items-center或items-baseline？这会拉偏top: 0的参考线，导致粘不住 - 父级是
inline-flex或inline-grid？它们不产生BFC，sticky直接被忽略 - 容器没设高度约束（比如缺
min-h-screen或h-[500px]），整个链路无滚动空间，sticky无从谈起 - 浮动子项（
float-left）导致父容器高度塌陷，sticky元素的包含块计算异常
最麻烦的不是找不到原因，而是多个条件叠加：比如一个h-screen父容器 + 里面嵌了个overflow-hidden卡片 + 卡片又套了flex items-center布局——这时候得一层层剥开看Computed，而不是只盯着自己写的那行sticky top-0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
