只设 grid-area 相同不会自动产生可控重叠；必须配合 position（如 relative）和 z-index 才能控制层叠顺序，且需处于同一层叠上下文。
只设 grid-area 相同，元素不会自动按你想要的顺序重叠——它只是让多个元素“落到同一个格子”，真正决定谁在上、谁在下的，是 z-index 和定位状态，且必须处于同一层叠上下文。
为什么 grid-area 值一样却没看到重叠效果
浏览器把所有 grid-area: "cover" 的元素都放进那个命名区域，但渲染时仍按 DOM 顺序堆叠（后写的盖前面），z-index 在 position: static 下完全无效。这不是 bug，是 CSS 层叠规则的默认行为。
- 常见错误：只写
grid-area: "cover"，没加position: relative，就以为z-index: 2能控制层级 → 实际无反应 - DOM 顺序不可靠：不能靠模板里谁写在后面“猜”谁在上，尤其在 React 中
{search && <div></div>}的插入顺序可能动态变化 -
grid-template-areas的书写顺序只影响区域定义，和渲染层叠无关
必须加 position 才能让 z-index 生效
Grid 项目默认是 position: static，此时 z-index 被忽略。要启用 z-index，必须显式设置定位属性。
- 推荐用
position: relative：不影响布局流，语义清晰，最安全 - 避免用
position: absolute：它会让元素脱离 Grid 轨道，不再响应grid-column或grid-row - 父容器不用加
position或z-index，它只负责划分轨道，不参与子项层叠排序
跨容器重叠时 z-index 失效的真相
Grid 容器自身会创建新的层叠上下文。这意味着子项的 z-index 只在该容器内比较，无法穿透到兄弟容器或 body。
立即学习“前端免费学习笔记（深入）”；
- 典型现象：给卡片里的图标设
z-index: 999，但它盖不住另一个独立display: grid的弹窗 - 检查父级是否意外触发新层叠上下文：比如
transform、opacity: 0.99、filter、will-change - 若需跨容器覆盖（如全局 toast 盖住侧边栏），必须给整个 Grid 容器设
z-index，而不是只调子项
调试与写法建议
用浏览器开发者工具快速验证实际占位和层叠关系，避免凭空猜测。Chrome / Edge DevTools 中勾选 “Show grid areas” 和 “Show line numbers”，一眼看出元素是否真落在同一区域。
- 统一用行列语法写
grid-area：例如grid-area: 2 / 3 / 3 / 4，比grid-area: "icon"更可控，避免命名线隐式偏移 - IE 不支持四值
grid-area语法，需降级为grid-row+grid-column - 别依赖
overflow: hidden或clip-path来“隐藏溢出”，它们会直接裁掉重叠部分，让效果消失
最容易被忽略的一点：重叠区域的点击事件默认穿透——视觉上盖住了，但鼠标点击仍会落到下层元素上，需要配合 pointer-events: none 或 pointer-events: auto 显式控制。
