position: sticky 失效主因是祖先元素 overflow 非 visible 或父容器 display 非块级/未设高度；需查 computed 面板确认 overflow 计算值，用 clip-path: inset(0) 替代 overflow: hidden，给 th 单独设 sticky 并确保表格容器有高度和 overflow-y: auto。
写了 position: sticky 却没反应，大概率不是语法写错，而是浏览器根本没把它当 sticky 处理——Computed 面板里 position 的值已经是 static。
DevTools 里 computed position 是 static，怎么快速定位源头？
这不是 bug，是规范强制降级：只要任意祖先（从 sticky 元素往上直到 body）的 overflow-x 或 overflow-y 计算值为 hidden、auto 或 scroll，sticky 就会被静默置为 static。
- 别只看 Styles 面板里有没有写
overflow: hidden，要进 Computed 面板查「最终计算值」 - 重点排查：
.ant-modal外层 wrapper、.swiper-wrapper、Tab 切换容器、CSS-in-JS 注入的内联样式（比如 Emotion 动态加的style属性） - 临时验证：选中可疑祖先，在 Styles 面板里手动加
overflow: visible !important，如果 sticky 立刻恢复，问题就锁定了 - 用 Layout 面板确认该祖先的「Actual height」是否真大于设定高度（例如
height: 100vh但内容撑高了，却因 overflow 截断滚动）
必须保留 overflow: hidden 怎么办？clip-path 是更优解
硬删 overflow: hidden 常会破 UI：圆角图片裁剪失效、弹窗内容溢出、动画穿帮。此时 clip-path: inset(0) 是目前最轻量、兼容性最好的替代方案。
- 视觉效果和
overflow: hidden完全一致，但不创建新 BFC，也不截断滚动上下文 - 写法必须是
clip-path: inset(0)（不带单位），旧版 Safari 对inset(0px)解析不稳定 - 支持 Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+，2026 年已无需考虑 IE
- 若该元素同时有
border-radius，可直接替换overflow，border-radius仍生效；但避免两者写在同一层导致渲染异常，必要时提一层 wrapper
父容器是 flex/grid 或 inline 元素，sticky 直接被忽略
sticky 要求锚定在块格式化上下文（BFC）内，而某些 display 值天然不产生 BFC，浏览器连解析都不会进入 sticky 流程。
-
display: inline-flex或display: inline-grid的父容器：sticky 元素的position计算结果永远是static；临时改成display: flex或display: grid就能立刻验证 - sticky 元素本身是
span、a等默认inline的标签：必须显式设display: block、display: inline-block或display: table - flex 容器没设
height、min-height或max-height：即使子项撑高，浏览器也可能无法识别“可滚动区域”，sticky 找不到锚定参考；建议把height: 100vh改成min-height: 100vh -
align-items: center或baseline会拉偏top: 0的基准线，导致吸附位置偏移；可加align-self: flex-start或改用align-items: flex-start
表格中 th 不吸顶？thead 上加 sticky 没用
浏览器不把 thead 当作 sticky 作用目标，它只是语义容器。真正要粘住的是每个单元格。
- 必须给每个
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），否则thead和tbody列宽不一致会导致视觉错位 - 避免祖先链上有
transform、filter或will-change，尤其在 Safari 中会直接打断 sticky 边界
最容易被忽略的是：失效往往不在 sticky 元素自身，而在它上方三四层 DOM 的某个不起眼 wrapper 上——那个写着 overflow: hidden 的 class 可能来自框架组件、CSS-in-JS 注入，甚至是一行被遗忘的内联样式。查的时候别停在直接父级，要点开 parentElement 一直看到 body。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
