sticky失效主因是祖先overflow:hidden/auto/scroll截断滚动上下文或grid-template-rows未明确约束；需逐级检查computed overflow、用clip-path:inset(0)替代overflow:hidden、设明确行高及min-height替代height。
不是你写错了 position: sticky，而是浏览器根本没启动 sticky 逻辑——它被某层祖先的 overflow 或 Grid 轨道尺寸不明确给静默降级成了 static。
DevTools 里 position 显示 static？先查所有祖先的 overflow
只要任意一层祖先（从 sticky 元素自身往上，直到 body）的 overflow-x 或 overflow-y 计算值是 hidden、auto 或 scroll，sticky 就会被规范强制降级。这不是 bug，是标准行为。
- 常见藏雷位置：
.ant-card-body、.tw-overflow-hidden、.modal-content、Swiper 容器、Tab 切换 wrapper，甚至 CSS-in-JS 动态注入的内联样式 - 用 DevTools 选中 sticky 元素，逐级点开
parentElement，在「Computed」面板盯住overflow-x和overflow-y的最终值 - 临时加
overflow: visible !important到某层，如果 sticky 立刻恢复，问题就锁定了 - 必须保留裁剪效果时，用
clip-path: inset(0)替代overflow: hidden——它不创建新 BFC，也不截断粘性链
grid-template-rows 用了 auto 或没设？sticky 找不到锚点
sticky 的 top 是相对于 Grid 容器计算的。如果容器行高由 auto、min-content 或未约束的 1fr 决定，实际高度不可预测，浏览器无法确定“粘住”的边界。
- 避免
grid-template-rows: auto 1fr；改用明确值，例如60px 1fr或80vh 1fr - 如果 sticky 元素放在第一行，确保该行高度 ≥ 元素自身高度（比如设
height: 120px） - 别把 sticky 元素放进跨多行的
grid-area——包含块边界模糊，Chrome 和 Firefox 渲染可能不一致 - 动态内容加载后尺寸变化？监听
resize或用requestAnimationFrame触发重排
Grid 容器本身设了 height: 100vh？sticky 只在首屏生效
height: 100vh 会硬性截断容器高度，哪怕子内容撑高了，滚动上下文也被锁死在视口内。一旦滚动超出，sticky 元素就脱离作用域，“突然掉下去”。
- 把
height: 100vh改成min-height: 100vh，允许内容自然撑高 - Grid 容器若需滚动，必须显式设
max-height+overflow-y: auto（仅overflow: auto不够，要带y） - Flex/Grid 父容器没设
flex-direction: column+overflow-y: auto，Safari 尤其不认 - 避免在 sticky 元素或其直系父级上用
transform、filter、will-change——它们会创建新层叠上下文，切断粘性链
真正难排查的，往往不是某一行代码写错了，而是 overflow 和 grid-template-rows 这两个条件同时存在：一个在 DOM 某层悄悄截断了滚动上下文，另一个让 Grid 容器的“可粘区域”变得不可计算。这两个因素叠加，DevTools 里连 position: static 都可能不显示，只看到元素无声无息地滚走了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
