Grid容器自身设overflow-y:auto无效，因sticky需依赖可滚动祖先，正确做法是将overflow-y:auto和max-height设在外层wrapper上，且需避免transform/filter等阻断属性。
为什么直接给 grid 容器设 overflow-y: auto 后 sticky 仍不生效
Grid 布局中 position: sticky 失效，最常见原因是滚动容器没“接住” sticky 元素的定位上下文。Grid 本身不创建滚动约束，overflow-y: auto 必须加在 **grid 容器的直接父元素** 上，而不是 grid 容器自身。否则浏览器找不到可滚动祖先，sticky 退化为 static。
另外，Grid 容器若设置了 display: grid 但未定义 grid-template-rows 或显式高度，其子项（如表头行）可能无法触发滚动计算——sticky 要求目标元素必须有明确的“进入/离开滚动视口”的判断依据。
- ✅ 正确做法：用一个外层
<div class="grid-wrapper">包裹<div class="data-grid">，overflow-y: auto和max-height都设在.grid-wrapper上 - ❌ 错误写法：
.data-grid { display: grid; overflow-y: auto; }—— Grid 容器自身设 overflow 不会激活子项的 sticky - ⚠️ 注意：如果
.grid-wrapper有transform、filter或will-change，会创建新层叠上下文，直接阻断 sticky 行为
如何让 grid 中的表头行（如 .header-row）真正吸顶
在 Grid 布局里，表头通常是一行 grid-row，不是语义化的 <thead>。要让它吸顶，不能只靠 top: 0，还必须确保它在网格中占据独立轨道、且不被其他行撑开或压缩。
关键点在于：sticky 元素必须能“感知”滚动方向，而 Grid 的自动行高（auto）可能导致其高度不稳定，影响阈值判断。
立即学习“前端免费学习笔记（深入）”；
- 给表头行显式设置
grid-row: 1 / 2，避免被grid-auto-rows干扰 - 为
.header-row设置固定高度（如height: 48px），并同步在top中使用该值（top: 48px若需第二层吸顶） -
.header-row > *（即所有表头单元格）都要设position: sticky+top: 0，不能只设在行容器上 - 必须加
z-index: 10，否则滚动时会被后续grid-row盖住
Grid 中固定首列 + 表头时 z-index 冲突怎么解
当同时对表头单元格（top: 0）和首列单元格（left: 0）应用 position: sticky，左上角交叉单元格会因两个 sticky 方向共存而出现层叠错乱——浏览器不保证 top 和 left 的优先级顺序。
真实场景中，这个单元格常被遮挡或错位，尤其在 Safari 15.2–15.3 和部分安卓 WebView 中更明显。
- 左上角单元格（如
.header-row .first-col）必须单独加z-index: 20，高于其他 sticky 单元格（z-index: 10） - 避免对整行或整列设
position: sticky；应精确到单个单元格元素，用:nth-child(1)或类名控制 - 不要依赖
grid-area或place-self调整 sticky 元素位置——它们会干扰 sticky 的锚定计算 - 若发现 iOS Safari 吸顶偏移，临时加
will-change: transform到该单元格，但仅限必要时，避免渲染开销
移动端 touch 滚动下 sticky 延迟或跳变怎么办
Grid 布局中 sticky 在 iOS 和部分安卓设备上存在 1–2 帧延迟，尤其在快速拖拽时，表头会“滞后半拍”才吸顶，甚至短暂消失。这不是 bug，而是浏览器对 touch 滚动事件节流与 sticky 重绘时机不同步导致的。
纯 CSS 无完美解，但可收敛表现：
- 给 sticky 单元格加
backface-visibility: hidden，强制启用硬件加速，改善重绘响应 - 避免在 sticky 元素内使用
box-shadow或filter: blur()，这些会触发额外合成层，加剧延迟 - 若项目必须兼容 iOS 15.2–15.3，仅靠
@supports (position: sticky)不够；得用 JS 检测 UA，对特定版本降级为position: fixed+IntersectionObserver动态切换 - 注意：Grid 的
subgrid尚未在 Safari 全面支持，别在 sticky 表头中嵌套 subgrid，会导致吸顶完全失效
实际中最容易被忽略的是：Grid 布局下，position: sticky 的生效不仅取决于样式，更取决于整个渲染树中滚动上下文的“链路完整性”——任何一个中间祖先的 overflow: hidden、transform 或缺失高度，都会让 sticky 彻底静默。
