sticky头部在grid中失效是因为父容器未形成粘性上下文；需为grid容器设置height/max-height和overflow-y:auto，并确保header设top:0、position:sticky。
sticky 头部在 grid 布局里为什么经常失效
直接给 header 加 position: sticky 却不滚动？大概率是父容器没形成“粘性上下文”——Grid 容器默认不是滚动容器，sticky 需要一个有明确高度/溢出限制的祖先来作为“边界”。Grid 本身不自动提供这个边界，得手动干预。
常见错误现象：header 位置不动、一滚动就消失、或只在部分区域 sticky。
- 确保 Grid 容器（比如
.layout）设置了height或max-height，且overflow-y: auto（或scroll） - 不要把
sticky元素放在grid-template-areas中未显式定义高度的区域（比如用1fr却没限制整体高度） -
top值必须明确设置（如top: 0），否则 sticky 不触发
用 grid-template-areas 定义头部区域并保持 sticky
区域名只是语义占位，真正决定 sticky 行为的是元素自身的定位和父容器的溢出控制。但区域定义能帮你清晰约束结构，避免 header 被其他网格项挤变形。
典型结构：
.layout {
display: grid;
grid-template-areas:
"header"
"main";
grid-template-rows: max-content 1fr;
height: 100vh;
overflow-y: auto;
}
<p>header {
grid-area: header;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
</p>
-
max-content确保 header 行高随内容自适应，不会拉伸 -
1fr给 main 留出可滚动空间，配合容器height: 100vh和overflow-y: auto形成滚动上下文 - 不要用
grid-row: 1这类隐式定位覆盖grid-area，否则可能破坏 sticky 的层叠上下文
多区域布局下 sticky 头部与侧边栏共存的要点
当页面有 header、sidebar、main 三个区域，又想 header 全宽 sticky，sidebar 固定不动，main 可滚动——关键在于“谁负责滚动”。通常让 main 自己滚动，header sticky 在外层容器上；或者让整个 grid 容器滚动，header sticky 在其内部。
推荐做法（外层容器滚动）：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main";
grid-template-columns: 240px 1fr;
grid-template-rows: max-content 1fr;
height: 100vh;
overflow-y: auto; /* 滚动由 layout 承担 */
}
<p>header {
grid-area: header;
position: sticky;
top: 0;
z-index: 10;
}</p><p>main {
grid-area: main;
overflow-y: auto; /<em> 内容超长时自己滚动，不影响 header </em>/
}
</p>
- 如果 sidebar 也要固定，它同样需要
position: sticky+top: 0，但必须和 header 同级、同容器，且z-index区分层级 - 避免在
main上同时设overflow-y: auto和让.layout也设，否则滚动行为冲突，sticky 容易跳变 -
grid-template-rows: max-content 1fr是关键：header 行不参与 flex/fractional 分配，保证 sticky 锚点稳定
兼容性与移动端需要注意的坑
iOS Safari 对 position: sticky 在 Grid 容器中的支持直到 iOS 15.4 才完整，旧版本可能出现 sticky 失效或滚动卡顿。Android Chrome 相对稳定，但仍需验证。
- 测试时务必在真机 Safari 上检查：用
transform: translateZ(0)或will-change: transform强制硬件加速，有时能修复 iOS 渲染异常 - 不要依赖
grid-area名称做 JS 查询（如document.querySelector('[grid-area="header"]')），HTML 中没有grid-area属性，这是 CSS 层面的声明 - 如果使用 CSS-in-JS（如 Emotion），确保
position: sticky和top没被条件样式意外覆盖（比如响应式断点里重置了position）
最易被忽略的一点：sticky 元素的 z-index 必须高于它后面同层的网格项，否则滚动时会被遮挡——尤其当 main 区域有卡片、模态框等绝对定位内容时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
