Tailwind中sticky不生效的主因是祖先元素设置了overflow:hidden/auto/scroll、height:100vh、transform等属性，或表格中未给th单独加sticky，需逐级检查Computed样式并调整对应CSS。
sticky在Tailwind中不生效，先查父容器overflow
绝大多数sticky失效不是类名写错，而是某个祖先元素悄悄加了overflow: hidden、overflow: auto或overflow: scroll——它会截断粘性行为的滚动上下文，让浏览器把sticky降级为position: static。
常见藏匿点：Modal组件外层、Card容器、Tab面板、Swiper wrapper，甚至CSS-in-JS注入的内联样式。用DevTools逐级展开父节点，看Computed里的overflow值，别只信Styles面板里写的那行。
- 临时验证：给疑似父级加
overflow: visible !important，如果sticky恢复，就坐实是它的问题 - 不能删
overflow: hidden？改用clip-path: inset(0)替代，它裁剪但不创建新BFC - 若必须保留
overflow-y: auto，就把sticky元素提到该容器外部，挂到更高层且overflow: visible的父级下
表格表头固定时，thead上加sticky top-0没用
thead只是语义容器，浏览器不把它当作sticky作用目标。真正要“粘住”的是每个th单元格，不是thead本身。
- 必须给每个
th单独加sticky top-0和足够高的z-index（比如z-50，z-10在某些层叠场景下不够） - 包裹表格的容器（如
div.table-container）必须设overflow-y: auto且有明确高度，例如h-96或min-h-[400px] - 加
table-fixed并统一列宽（如w-32或min-w-[120px]），否则thead和tbody列宽不一致会导致视觉错位 - 避免
transform、filter、perspective等属性出现在祖先链上，尤其在Safari中会直接打断sticky边界
用了height: 100vh，sticky滚一段就消失
固定高度height: 100vh会让父容器无法随内容撑高，导致滚动上下文被截断——sticky只在该容器内部生效，一旦内容超出100vh，它就“掉出边界”，退回到普通文档流。
立即学习“前端免费学习笔记（深入）”；
- 把
height: 100vh换成min-height: 100vh，既保底又允许伸展 - 确保该容器不是
display: contents或浮动脱离文档流，否则没有包含块可依附 - Flex/Grid容器若没设高度约束（如
height: 100vh缺失），或用了align-items: center，也会偏移top: 0的基准线 - Safari下更敏感，建议用
min-h-[400px]而非h-[400px]，避免地址栏缩放导致高度计算失败
动态渲染后sticky不生效
React/Vue等框架中，sticky元素在useEffect或mounted钩子中插入DOM后，可能因布局计算早于样式应用而初始失效——浏览器已经完成首次布局，没机会重新识别sticky边界。
- 插入后手动触发一次
el.getBoundingClientRect()，强制重排 - 或用
requestAnimationFrame延迟1帧再加sticky类，给浏览器留出时机 - 别依赖
window.getComputedStyle(el).position === 'sticky'判断是否生效，它返回sticky但实际行为可能已被静默降级 - 检查是否有
!important覆盖的position: relative或static，尤其来自CSS重置或UI框架
真正卡住sticky的，往往不是某一行代码写错了，而是某处overflow: hidden、某层height: 100vh、某个transform父容器，或者表格里漏掉了th上的sticky——它们都藏得深，但影响是全局性的。
