position: sticky 在 Grid 中失效是因为 Grid 容器默认无滚动上下文且未约束高度；需设置 overflow-y: auto、明确 height/max-height、用 grid-template-rows 显式定义表头行高，并避免 transform/float 等破坏粘性的属性。
为什么 position: sticky 在 Grid 中经常失效
直接给 Grid 容器的子元素（比如表头行）加 position: sticky 和 top: 0，大概率没反应——这不是你写错了，而是 Grid 的默认 overflow 行为和 sticky 的触发条件冲突。sticky 元素必须在其**最近的滚动祖先容器内有明确的可滚动边界**，而 Grid 容器默认不产生滚动上下文，且其子项的定位上下文可能被隐式重置。
关键点：position: sticky 不是“脱离文档流”，它依赖父容器的 overflow 和自身是否在滚动轴上“可粘住”。Grid 布局中，如果没显式设置容器可滚动、或没限制高度、或子项未正确参与网格轨道定义，sticky 就会静默降级为 position: relative。
- 确保 Grid 容器设置了
overflow-y: auto（不能是hidden或未设） - Grid 容器必须有明确的
height或max-height，否则无法触发内部滚动 - 表头行（如
.header-row）需属于 Grid 的一个独立grid-row，不能靠grid-row: span 1模糊定义；最好用grid-template-rows显式声明表头行高度 - 避免对 sticky 元素设置
float、clear或transform（哪怕transform: none也会破坏粘性）
Grid 布局下 sticky 表头的最小可行结构
核心不是“让某一行 sticky”，而是让 Grid 的**行轨道具备高度约束 + 容器可滚动 + sticky 元素位于该轨道内且 top 值合理**。下面是最简但可靠的 HTML/CSS 组合：
<div class="table-grid"> <div class="header-cell">姓名</div> <div class="header-cell">部门</div> <div class="header-cell">薪资</div> <div class="data-cell">张三</div> <div class="data-cell">技术部</div> <div class="data-cell">15000</div> <!-- 更多 data-cell ... --> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.table-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 40px repeat(auto-fill, 40px); /* 第一行是表头，固定高 */
row-gap: 0;
height: 300px; /* 必须设！否则无滚动 */
overflow-y: auto;
}
.header-cell {
grid-row: 1;
position: sticky;
top: 0;
background: #f5f5f5;
z-index: 1;
}
.data-cell {
grid-row: auto;
}注意：这里用 grid-template-rows: 40px repeat(auto-fill, 40px) 是为了明确第一行轨道高度，让 top: 0 有参照；若用 auto 或 minmax() 不够精确，sticky 可能错位。
处理列宽不一致与 border/cell-spacing 问题
Excel 风格要求列对齐严丝合缝，但 Grid 默认不会自动拉齐跨行单元格的列宽，尤其当内容长度差异大时，sticky 表头和下方数据列容易错位。这不是 sticky 的锅，是 Grid 列轨道计算逻辑导致的。
- 所有
.header-cell和.data-cell必须使用完全相同的grid-column值（例如都写grid-column: 1），不能混用span或隐式位置 - 避免给单元格设
width或min-width，改用grid-template-columns统一控制，例如grid-template-columns: 120px 1fr 100px - 边框问题：sticky 元素的
border-bottom会盖住下面一行的border-top。解决方案是统一用border-bottom，或对.header-cell设border-bottom: 1px solid #ccc，对.data-cell设border-top: none - 不要依赖
box-sizing: border-box来“修正”宽度——Grid 的轨道尺寸计算发生在 box-sizing 之前，border 会额外撑开单元格
兼容性与真·Excel 行为的差距
Chrome/Firefox/Edge（≥ v79）对 Grid + sticky 支持良好，但 Safari（≤ v16.4）存在已知 bug：sticky 元素在 Grid 容器中可能无法响应滚动，或 top 偏移量计算错误。这不是配置问题，是渲染引擎缺陷。
如果你必须支持旧版 Safari，有两个现实选择：
- 降级为 Flexbox + 手动监听
scroll事件控制transform: translateY()模拟粘性（性能较差，且需处理 resize） - 放弃纯 CSS 方案，用
position: absolute+ JS 同步表头位置（更可控，但要小心 scroll event throttle 和 layout thrashing）
另外，“Excel 式冻结窗格”包含横向滚动时列也固定的需求，这在纯 CSS 中无法用 sticky 实现——sticky 只支持一个轴（top 或 left），不能同时生效。需要双层嵌套滚动容器，或直接上虚拟滚动库（如 react-window）。
最常被忽略的一点：sticky 表头的 z-index 必须高于所有后续行，但又不能设得过高（比如 9999），否则可能遮挡弹出层或 tooltip。稳妥做法是只比数据行高一级，比如数据行 z-index: 0，表头就用 z-index: 1。
