position: sticky 在 grid 容器中不生效，是因为其依赖最近的具有滚动机制的祖先块级容器作为锚点，而默认 grid-container 无 overflow 约束、不触发滚动上下文；需显式设置 overflow:auto 和宽高限制，并确保固定列宽度明确、left 值精准对应。
为什么 position: sticky 在 Grid 容器里不生效？
直接给 Grid 子项（grid-item）设 position: sticky 且 left: 0，往往没反应——这不是 bug，而是因为 sticky 的“容器边界”由最近的具有滚动机制的**祖先块级容器**决定，而默认的 grid-container 没有 overflow 约束，也不触发新的层叠上下文或滚动上下文。Grid 本身只是布局算法，不自动提供 sticky 所需的“滚动锚点”。
关键点：sticky 需要父容器有明确的滚动范围，且该容器不能是 display: grid 的“无溢出默认态”。
- 必须给 Grid 容器设置
overflow: auto或overflow-x: auto（取决于是否横向滚动） - 同时确保容器有固定宽高或 max-width/max-height 限制，否则内容不溢出，sticky 就永远不触发
- sticky 元素自身需指定
left（固定列）或top（固定行），且不能依赖z-index来“浮起”，除非父容器是 stacking context
如何让第一列始终固定，其余列可横向滚动？
典型电子表格左侧行号/分类列固定，右侧数据列滚动。核心是：把固定列和滚动区拆成两个逻辑层，但保持 Grid 的列对齐关系。
推荐做法是用 grid-template-columns 显式定义列宽，并让固定列所在轨道不参与滚动，滚动容器只包裹非固定列：
.table-grid {
display: grid;
grid-template-columns: 120px 1fr 1fr 1fr; /* 第一列固定宽，其余用 fr */
overflow-x: auto;
width: 100%;
}
.table-grid > *:nth-child(1) {
position: sticky;
left: 0;
background: #f8f9fa;
z-index: 1;
}
- 固定列必须有明确宽度（不能是
auto或minmax()不可控形式），否则 sticky 锚点计算会漂移 -
z-index: 1是必需的，否则滚动时可能被后列内容遮盖 - 如果 Grid 有
gap，固定列右侧 gap 也会被“粘住”，如需视觉隔离，改用padding-right替代
多列固定（比如前两列都固定）怎么写？
不能只靠 :nth-child(1), :nth-child(2) 简单叠加，因为第二列 sticky 后会覆盖第一列的 left 偏移，导致错位。
正确方式是按列索引分别控制 left 值，并确保宽度严格对应 grid-template-columns：
.table-grid {
grid-template-columns: 100px 150px 1fr 1fr;
}
.table-grid > *:nth-child(1) { left: 0; }
.table-grid > *:nth-child(2) { left: 100px; } /* = 第一列宽 */
- 第二列的
left必须等于它左侧所有固定列宽度之和（这里是100px） - 如果列宽用
ch、em或fit-content，sticky 行为会不稳定，务必用px、rem或fr（仅用于非固定列） - IE 不支持
sticky，如需兼容，得回退到绝对定位 + JS 监听 scroll，但 Grid + sticky 组合本身已是现代方案
滚动时固定列闪烁或错位的常见原因
不是 Grid 问题，而是 sticky 触发条件被意外破坏。最常踩的坑：
- 父容器设置了
transform、perspective或filter—— 这些会创建新的 containing block，使 sticky 失去原始滚动上下文 - 固定列内部用了
display: flex且子项有margin，导致实际渲染宽度略超设定值，触发重排抖动 - 使用了
grid-auto-flow: column，此时nth-child选择器失效，应改用grid-column显式定位并配合类名控制 - 在 Safari 上，若容器有
will-change: transform，sticky 可能延迟一帧生效，去掉即可
真正难调的不是写法，而是让 sticky 的“锚点容器”干净、稳定、宽度可预测——Grid 提供了列对齐能力，但 sticky 的可靠性全系于这个外部滚动上下文是否纯粹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
