grid容器必须设height和overflow-y:auto才能使sticky生效，因其需明确高度边界和可滚动上下文；页头须为直系子项、设top:0，且避免overflow:hidden/clip及隐式grid定位干扰。
Grid容器必须设height + overflow-y: auto
直接给页头加position: sticky却没反应？八成是Grid容器没形成“粘性上下文”。sticky不是自动生效的魔法，它需要一个**有明确高度边界且可滚动的祖先容器**——而Grid默认不滚动，也不会自动限高。
常见错误现象：页头一动不动、滚动时突然消失、或只在某段区域黏住后又松开。
-
height或max-height必须显式设置（比如height: 100vh），不能依赖auto或min-content -
overflow-y: auto（或scroll）要加在Grid容器上，不是子元素上 - 别用
overflow: hidden或overflow: clip——前者会截断sticky行为，后者虽不创建滚动上下文但也不允许滚动，sticky无处可粘
页头必须设top: 0且是Grid直系子项
只写position: sticky没用，top（或bottom）是激活条件。而且这个值不是“离视口多远”，而是“当元素顶部滚动到距离其**包含块顶部**还有多少像素时开始吸附”——在Grid中，这个包含块就是Grid容器本身。
容易踩的坑：
- 页头被嵌套在额外的
div里（比如<header><div class="inner">...</div></header>），导致它不再是Grid直系子项，sticky失效 - 用了
grid-row: 1之类隐式定位，覆盖了grid-area语义，可能破坏层叠上下文 - 父容器有
padding-top，但top: 0没补偿，结果页头实际粘在padding下方
避免grid-template-rows用auto或1fr撑满容器
如果写grid-template-rows: auto 1fr，而容器又没限高，1fr会无限拉伸，导致整个Grid容器高度远超视口——这时overflow-y: auto确实起作用了，但滚动的是整个Grid，页头反而被卷走。
正确做法是让页头行“自适应内容”，主体行“占满剩余空间但不溢出”：
- 页头行用
max-content或固定值（如64px），确保高度可控 - 主体行用
1fr，但前提是Grid容器已有height: 100vh等明确高度 - 别指望
minmax(0, 1fr)救场——它解决的是子项最小尺寸干扰，不是容器高度失控
移动端需注意100vh和-webkit-sticky
iOS Safari地址栏收起/展开会动态改写100vh的实际像素值，导致页头跳动或表尾错位。这不是你代码写错了，是vh单位本身的缺陷。
另外，iOS Safari 15.4之前必须加position: -webkit-sticky，否则直接忽略：
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
真正难调的点往往不在布局结构，而在这些跨浏览器、跨设备的细微差异——比如Firefox下contain: layout会让sticky锚点计算偏移几像素，而DevTools里根本看不出问题根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
