grid容器需设height和overflow-y: auto才能创建粘性上下文，header须为直系子元素、设top: 0和z-index，且避免padding干扰；多sticky元素需z-index递减配合dom顺序实现阶梯粘贴。

Grid容器必须设height + overflow-y: auto才能让sticky生效

直接给 header 加 position: sticky 却没反应？大概率是 Grid 容器没形成“粘性上下文”。position: sticky 不会自己找滚动边界，它只认最近的、**有明确高度且可滚动的祖先**——而 Grid 容器默认既不限高也不滚动，得手动补上这两个条件。

• height 或 max-height 必须显式设置（比如 height: 100vh），不能依赖 auto 或内容撑开
• overflow-y: auto 要加在 Grid 容器上，不是子元素上
• 别用 overflow: hidden 或 overflow: clip：前者直接禁用 sticky，后者虽不创建滚动上下文，但也不允许滚动，sticky 无处可粘
• 如果用 grid-template-rows: auto 1fr，而容器又没限高，1fr 会无限拉伸，导致整个 Grid 高度远超视口，滚动的是整个布局，header 反而被卷走

header必须是Grid直系子项且设top: 0

position: sticky 的激活条件是必须带有效的偏移值，top: 0 是最常用也最容易被忽略的一环。这个 top 不是相对于视口，而是相对于 Grid 容器的顶部边界——也就是你刚设好的那个 height 的起点。

• header 必须是 Grid 容器的直接子元素，不能嵌套在额外的 div 里（比如 <header><div class="inner">...</div></header>）
• 别用 grid-row: 1 这类隐式定位覆盖 grid-area，可能破坏层叠上下文，影响 z-index 生效
• 父容器若有 padding-top，而 top: 0 没补偿，header 实际会粘在 padding 下方，留出空白
• z-index 要设（比如 z-index: 10），否则滚动时可能被后面的内容穿透遮盖

用grid-template-areas定义区域时别踩高度陷阱

用 grid-template-areas 写语义结构很清爽，但区域本身不控制高度——真正决定 sticky 行为的是轨道尺寸和容器溢出设置。如果头部区域所在的行用 1fr 或 auto，又没限制整体容器高度，sticky 就容易失效或错位。

• 推荐写法：grid-template-rows: max-content 1fr，其中 max-content 让 header 行高随内容自适应，1fr 给主内容留出可滚动空间
• 避免在 grid-template-areas 中用未显式定义高度的区域（比如只写 "header" 却没配 grid-template-rows）
• 区域名只是占位符，header 是否 sticky，取决于它是否满足 position: sticky + top: 0 + 父容器滚动上下文，跟区域名无关
• 多区域共存（如 header + sidebar + main）时，关键是谁负责滚动：要么让整个 Grid 容器滚动（header sticky 在其内），要么只让 main 自己滚动（header sticky 在外层）

多个sticky标题共存时z-index和top要配合好

列表里多个分组标题都设 position: sticky，后一个会“顶走”前一个，这不是 bug，而是 sticky 的默认行为。想让它们阶梯式停留，得靠 z-index 控制堆叠顺序，并注意 top 的实际含义。

• 每个 sticky 元素都要设 z-index，且数值严格递减（比如一级标题 z-index: 10，二级标题 z-index: 9）
• 所有 sticky 元素的 top 都建议设为 0，视觉上的错开由它们在 DOM 中的位置自然形成——上级 sticky 占据空间，下级 sticky 在它下方开始贴顶
• 硬写 top: 64px 这类固定值容易错位，尤其当字体缩放或行高动态变化时
• Safari 和 Firefox 对嵌套 sticky 的 stacking 行为支持不一致，必要时可在 sticky 元素上加 contain: none 避免被祖先的 contain 属性干扰

复杂点在于：sticky 的行为不是孤立的，它被三层东西共同约束——父容器的 overflow 和高度、祖先是否含 transform/filter、以及它自身在网格轨道中的定位方式。漏掉任意一层，都可能让 header 看似写了却不动。

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

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

下载

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