grid容器需设max-height和overflow-y: auto以激活sticky；表头须grid-column: 1 / -1，首列须grid-row: 1 / -1；须显式设top/left、分层z-index，禁用transform/filter；列宽须显式统一，禁用原生table套grid。

Grid容器必须设max-height + overflow-y: auto才能激活sticky

直接给表头或首列加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-row: 1 / -1

Grid中能稳定sticky的，只有那些跨满整行或整列的元素。表头若只占某几列（如grid-column: 2 / 4），会被轨道对齐逻辑干扰，导致偏移甚至失效；同理，首列若没跨满所有数据行，滚动时会提前“断开”。

实操要点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 表头行（如.thead）必须设grid-column: 1 / -1，确保横跨全部列
• 首列单元格（如每行第一个.sticky-col）必须设grid-row: 1 / -1，且不能被grid-auto-rows意外截断
• 所有表头和首列元素都要显式设top: 0或left: 0，不能依赖默认值
• 避免把表头和首列混在同一个grid-row里，否则网格自动布局可能破坏粘性触发区

z-index必须分层设置，且不能被transform/filter干扰

左上角单元格（表头+首列交汇处）常被盖住，不是z-index数值不够大，而是层叠上下文被意外切断。一旦祖先元素加了transform、filter或will-change，就会创建新层叠上下文，让子元素的z-index失效。

正确做法：

• 表头设z-index: 10，首列设z-index: 11，左上角交汇单元格设z-index: 12
• Grid容器及其所有祖先都不能有transform、filter、overflow: hidden
• Tailwind用户尤其注意：overflow-hidden类会悄悄让sticky退化为static

列宽必须显式统一，不能依赖

语义

用原生<table>套<code>display: grid必然错位。浏览器对<table>有独立渲染逻辑，<code><thead>和<code><tbody>不参与Grid轨道计算，结果就是表头列宽和内容列宽各自算一套，滚动时明显偏移。 <p>必须改用<code><div>模拟表格结构： <ul> <li>整个容器设<code>display: grid，并用grid-template-columns显式声明每列宽度（如120px 1fr 150px）

所有行（表头、数据行、空行）都必须使用相同的grid-column: span 1分配方式

每个单元格加min-width: 0，防止长文本撑开列宽

预留滚动条空间：用scrollbar-gutter: stable both（Chrome/Edge/Firefox支持），或手动加padding-right: 16px

最易被忽略的点是：多个sticky元素共存时，它们不会自动“堆叠”，而是按滚动顺序抢占位置。如果需要阶梯式粘性（比如多层表头依次固定），必须靠top值递进+z-index分层，不能只靠一个top: 0。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！