Grid容器必须设max-height和overflow-y:auto才能激活sticky，因sticky依赖可滚动祖先；需确保粘性元素跨整行（grid-column:1/-1）、避免transform/filter/overflow:hidden干扰，且Safari需兼容处理。
Grid容器必须设max-height + overflow-y: auto
直接给 Grid 子项加 position: sticky 却没反应，八成是因为 Grid 容器没创建滚动上下文。Sticky 不是“自动粘”，它依赖最近的、**可滚动的祖先容器**——而这个祖先通常就是 Grid 容器自己，但必须同时满足两个硬条件：max-height（或 height）+ overflow-y: auto。
常见踩坑点：
-
.grid { display: grid; }→ 没高度、没 overflow，sticky 彻底失效 - 用
height: 100%但父级没高度，结果还是撑不满 → 改用max-height: 60vh更稳 - 写
overflow: scroll会强制显示滚动条，干扰 UX；overflow-y: auto是更合理的选择
粘性元素必须跨满整行（grid-column: 1 / -1）
Grid 中能稳定 sticky 的，基本只有那些占据整行宽度、且位于网格起始位置的标题类元素。如果把它塞进某个列轨道里（比如 grid-column: 2），Grid 的对齐逻辑和轨道尺寸计算会干扰 sticky 的包含块边界，导致偏移甚至失效。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 标题用
grid-column: 1 / -1，确保它横跨所有列 - 避免和普通内容混在同一
grid-row，否则可能被挤出粘性触发区 - 响应式多列布局下（如桌面 3 列、移动端 1 列），仍要保持
grid-column: 1 / -1，否则在多列时会被截断
别让 transform/filter/overflow:hidden 破坏层叠上下文
这些属性看似无关，实则会悄悄拦截 sticky 行为：
-
transform（哪怕只是translateZ(0)）、filter、will-change都会创建新层叠上下文，使 sticky 失效 - Grid 容器或任意祖先设了
overflow: hidden，sticky 就直接退化为static—— Tailwind 的overflow-hidden类常偷偷干这事 - Safari 特别敏感：如果祖先有
contain: layout paint，Firefox 和 Safari 都可能出现几像素偏移
排查建议：用 DevTools 逐层检查 computed overflow 和 transform，尤其注意 CSS 框架注入的隐藏规则。
Safari 和多标题场景需要额外处理
iOS 16.4 / macOS Ventura 之前，Safari 对 Grid + sticky 的支持极不稳定；即使现在，多个 sticky 标题并存时也会互相“顶替”——后一个到达临界点，前一个就立刻脱离，造成视觉跳变。
应对方式：
- 检测支持性：
CSS.supports('position', 'sticky')，不支持时降级为position: fixed+ JS 控制 - 多个标题阶梯式粘住？得靠
z-index分层 + 更细粒度的top偏移（例如第一个top: 0，第二个top: 48px） - 冻结首列+表头？左上角单元格设
top: 0; left: 0，其余首列表头只设left: 0，其余表头只设top: 0，否则错位
最易被忽略的一点：sticky 的“粘”始终是相对于其滚动祖先容器的，不是视口。一旦容器高度变化、或被嵌套在另一个 overflow: hidden 的 wrapper 里，行为就会不可预测——这种问题往往只在 Safari 或动态加载内容后才暴露。
