grid中sticky失效主因是祖先overflow:hidden/auto/scroll截断滚动上下文，导致浏览器静默降级为static；需用devtools逐级检查overflow值，用clip-path:inset(0)替代或设明确grid-template-rows修复。
Grid容器里sticky元素computed position是static？先查overflow
绝大多数Grid中sticky失效，不是因为没写top: 0，而是Grid父容器或其任意祖先设置了overflow: hidden、overflow: auto或overflow: scroll。这些值会把Grid变成“最近的滚动祖先”，但Grid本身不滚动——sticky就卡死在静态定位状态，DevTools里看到position: static就是铁证。
实操建议：
- 用DevTools选中sticky元素，逐级点开
parentElement，直到body，挨个看Computed面板里的overflow-x和overflow-y - 重点关注CSS框架类名（如
.ant-card、.tw-overflow-hidden）或自定义wrapper - 临时给某层加
overflow: visible !important，若sticky恢复，问题锁定 - 必须保留裁剪效果时，用
clip-path: inset(0)替代overflow: hidden（Chrome 55+/Firefox 54+/Safari 15.4+已全覆盖）
Grid容器没设grid-template-rows，sticky触发区域不可控
Grid中sticky的top偏移量是相对于Grid容器计算的，但如果容器没显式定义行高（比如用auto或min-content），浏览器无法确定“粘住”的边界在哪——结果就是元素要么提前吸附、要么压根不动。
实操建议：
- 给Grid容器设置明确的
grid-template-rows，例如grid-template-rows: 60px 1fr，避免依赖auto - 如果sticky项放在第一行，确保该行高度≥元素自身高度（否则
top: 0无意义） - 避免把sticky元素放进跨多行的
grid-area，不同浏览器对包含块边界的解析可能不一致 - 若内容动态加载，监听
resize或用requestAnimationFrame触发重排，防止首次渲染后尺寸变化导致sticky失效
Grid父容器用了height: 100vh，sticky只在首屏生效
height: 100vh会硬性截断Grid容器高度，哪怕子内容撑高了，滚动上下文也被限制在视口内。一旦滚动超出100vh，sticky元素就脱离作用域，退回到文档流——看起来像“突然掉下去”。
实操建议：
- 把
height: 100vh改为min-height: 100vh，既保初始高度，又允许容器随内容伸展 - 如果Grid容器是flex子项，确认其父级已设
height或min-height，否则flex不会传递滚动上下文 - 不要在Grid容器上同时用
overflow: auto和height: 100vh——这会让sticky锚定在局部滚动区，而非整个页面
Safari 15.4之前版本不支持Grid内sticky，-webkit-sticky顺序不能错
iOS Safari 15.4及更早版本（覆盖大量存量设备）完全忽略position: sticky，只认position: -webkit-sticky。而且声明顺序写错（比如position: sticky在前），整条规则会被浏览器跳过。
实操建议：
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 不要写
-webkit-position: sticky（属性名不存在） - 用PostCSS时，确认
autoprefixer目标浏览器包含iOS - 注意：即使加了
-webkit-sticky，若父容器有transform或will-change，iOS仍会失效——这类属性需整体规避
clip-path: inset(0)绕过overflow限制时，它对嵌套的transform或filter敏感，某些组合下仍会切断粘性链。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
