position: sticky 在 grid 容器中不生效，是因为 grid 容器未设置明确高度（如 max-height）和 overflow-y: auto，导致缺乏滚动上下文；粘性元素需全宽（grid-column: 1 / -1）、避免 transform/filter、合理设置 top 和 z-index，并注意 safari 兼容性与性能优化。
为什么 position: sticky 在 Grid 容器里不生效？
直接给 Grid 子项（比如一个 header 或 section）加 position: sticky 却没反应，大概率是因为它的父容器（Grid 容器）缺少明确的滚动上下文。Grid 本身不会自动创建滚动边界，position: sticky 的“粘性”依赖于最近的、有滚动行为的**可滚动祖先元素**——而这个祖先通常得是 Grid 容器自身，且必须满足两个条件：overflow-y: auto（或 scroll）+ 有明确高度限制（如 height、max-height）。
常见错误写法：
.grid { display: grid; } /* 没设高度、没设 overflow → sticky 失效 */
- Grid 容器必须显式设置
max-height（推荐）或height，不能靠内容撑开 - 必须设置
overflow-y: auto（scroll也行，但会强制显示滚动条） - 粘性元素的
top值才真正起作用；例如top: 0表示贴顶，top: 1rem表示离顶部 1rem 后固定 - 避免在粘性元素上设
transform、perspective或filter，这些会创建新的层叠上下文，干扰 sticky 行为
Grid 中哪些元素适合设为 sticky？
不是所有 Grid 子项都适合粘住。真正能稳定工作的，通常是那些**占据整行宽度、且位于网格轨道起始位置**的标题类元素，比如用 grid-column: 1 / -1 跨满行的 h2 或 div.header。如果它被放在某个列轨道内（比如 grid-column: 2），又没配好 grid-row 和 align-self，容易因网格对齐逻辑导致 sticky 偏移或失效。
- 推荐结构：每个“分组”以一个全宽标题开头，后跟若干普通子项，标题用
grid-column: 1 / -1 - 避免把 sticky 元素和普通内容混在同一网格行（
grid-row），否则可能被其他项挤出粘性范围 - 如果标题需要响应式多列布局（比如桌面端 3 列、移动端 1 列），sticky 元素仍需保持
grid-column: 1 / -1，否则在多列下会被截断或错位
如何让多个标题各自 sticky，且不互相覆盖？
单个 sticky 标题容易，但列表里有多个 h3 分组标题时，后一个标题会“顶走”前一个，造成视觉跳变。这不是 bug，而是 sticky 的默认行为：当新 sticky 元素到达临界点，它会自然取代前一个的位置。要实现“阶梯式粘性”（即上一个还没滚走，下一个就提前入场），必须借助 z-index 和更细粒度的定位控制。
- 给每个 sticky 标题设不同
z-index（递增），确保后出现的总在上层 - 关键技巧：用
top配合margin-top或padding-top留出空间，避免后一个标题瞬间“撞入”前一个位置 - 更稳妥的做法是把每个分组（标题 + 内容）包进独立的
div，再对这个 wrapper 设置display: contents（让其不参与网格布局），只让标题本身 sticky —— 这样各组隔离，互不影响 - 注意 Safari 对连续 sticky 元素的支持较弱，建议加
will-change: transform提前触发合成层（但别滥用，影响性能）
移动端适配和性能要注意什么？
iOS Safari 和部分安卓 WebView 对 position: sticky 在 Flex/Grid 中的支持存在延迟或闪烁，尤其在快速滚动时。单纯靠 CSS 很难根治，得从结构和渲染策略入手。
- 避免在 sticky 元素内部使用
width: 100%或flex: 1，改用width: -webkit-fill-available（iOS 专用）兜底 - 不要在 sticky 元素上做复杂动画（如
opacity渐变、scale缩放），会触发重排，卡顿明显 - 如果列表项很多（>100 条），sticky 标题叠加会导致滚动性能下降，此时应考虑虚拟滚动（virtualized list），把 sticky 逻辑交给 JS 控制（例如监听
scroll+getBoundingClientRect()） - 测试时务必真机验证：Chrome DevTools 的模拟器无法准确复现 iOS 的 sticky 行为
实际中最容易被忽略的，是 Grid 容器自身的 overflow 和尺寸约束是否真正生效——哪怕只差 1px 的高度计算误差，sticky 就完全静默。动手前先用浏览器开发者工具检查 computed styles，确认 overflow-y 是 auto，且容器高度确实被限制住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
