z-index必须配合position: relative等非static定位属性才生效，且需确保父容器未创建新层叠上下文；重叠由grid-column/grid-row交集实现，DOM顺序与z-index共同决定最终层级。
Grid子项重叠本身不难，难的是让它“按你想要的顺序叠”，且在各种浏览器和场景下稳定生效。核心就两点：先让它们物理上落在同一区域，再用 z-index 控制谁在上——但 z-index 必须配合 position 才能起作用。
grid-column / grid-row 交集才是重叠的真正条件
只写 grid-column: 2 或 grid-row: 1 容易误判实际占位，必须显式写出起止线才能确保交集存在。
-
grid-column: 2 / 4占第 2、3 列；grid-row: 1 / 3占第 1、2 行 → 二者构成 2×2 区域重叠 -
grid-column: 2 / 2宽度为 0，元素不可见；grid-column: 2等价于2 / 3，但容易漏掉跨列意图 - 负值可用：
grid-row: -2 / -1指倒数第二行到最后一行，适合固定底部覆盖层 - 调试时打开 DevTools 的 “Show grid lines” 和 “Show area names”，一眼看出是否真重叠
z-index 不生效？大概率是 position 缺失或父容器干扰
z-index 对 position: static（默认值）完全无效，这不是 Grid 的限制，而是 CSS 层叠规则本身的要求。
- 最稳妥写法：
.overlay { position: relative; z-index: 2; }——relative不改变 Grid 布局位置，只激活层叠能力 - 别用
position: absolute单纯为了启用z-index，否则它会脱离 Grid 轨道，无视grid-column设置 - 如果加了
position和z-index还是不生效，检查父容器是否设置了opacity: 0.99、transform: translateZ(0)、filter: blur(1px)或will-change: transform—— 这些都会创建新层叠上下文，把子项的z-index锁死在内部 - 验证方法：在 Computed 面板搜
stacking context，或临时移除可疑属性看效果是否恢复
grid-template-areas 写错名字，重叠直接失效
写 grid-area: "cover" 没用，除非你在 grid-template-areas 里明确定义了这个名称，否则元素会被丢进 auto-placement 区域，甚至不渲染。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
grid-template-areas: "cover cover" "cover cover";（两行两列都叫 cover） - 错误写法：
grid-template-areas: "cover";（单列定义，容器若为两列宽，第二列会塌缩，视觉错位） - 命名区域冲突不是 bug：多个元素引用同一
grid-area名字，就是设计来重叠的 - 更可控的替代：统一用行列语法，如
grid-area: 2 / 3 / 4 / 5;，避免依赖隐式命名线导致坐标算错
最容易被忽略的是层叠上下文的嵌套层级——Grid 容器自身就是一个独立的 stacking context，子项的 z-index 只在它内部比较。想让一个卡片里的按钮盖过整个页面弹窗？做不到，因为弹窗大概率在另一个容器的 stacking context 里。这时候得控制外层容器的 z-index，而不是拼命给子项加 9999。
