grid-area重叠本身不生效，z-index是唯一可控手段；Grid项目默认可直接用z-index，无需position；跨容器重叠需控制容器z-index；点击事件默认穿透，需pointer-events配合。
grid-area 重叠本身不生效，z-index 是唯一可控手段
Grid 容器里两个项目即使 grid-area 坐标完全一致，也不会自动产生视觉重叠——浏览器按 DOM 顺序堆叠，后出现的项目盖在前面。想主动控制谁在上、谁在下，z-index 是必须写的，且只对定位上下文（positioned）或 Grid/ Flex 项目有效。Grid 项目默认就是“参与层叠的 flex/grid item”，无需加 position: relative 就能直接用 z-index。
- 错误写法：
grid-area: 1 / 1 / 3 / 3;两次，但没设z-index→ 看似重叠，实则仅靠源序决定遮挡，不可控 - 正确做法：给需要置顶的项目加
z-index: 2，底层加z-index: 1（或不设，默认为 0） - 注意：父容器不能设
overflow: hidden或clip-path，否则会裁掉溢出部分，让重叠“消失”
grid-area 坐标冲突时，浏览器不会报错但渲染不可预测
grid-area 写成字符串（如 "header"）依赖命名线，写成行列值（如 1 / 2 / 4 / 5）则直接定位。两者混用容易导致坐标算错——比如本想让图标盖在按钮右上角，却因行号从 0 开始误写成 0 / 3 / 1 / 4，结果图标跑出网格容器外，或被其他轨道挤压变形。
- 调试技巧：打开浏览器开发者工具，勾选“Show grid areas”和“Show line numbers”，一眼看出实际占位
- 安全写法：统一用行列语法，显式写出起止，避免依赖隐式命名线；例如用
grid-area: 2 / 3 / 3 / 4;而非grid-area: "icon"; - 兼容性提醒：
grid-area四值语法在 IE 中完全不支持，若需兼容，得降级为grid-row+grid-column
z-index 在 Grid 中的层叠上下文有隐藏限制
Grid 容器自身会创建新的层叠上下文（stacking context），这意味着子项目的 z-index 只在该容器内比较，不会穿透到父容器或其他兄弟 Grid 中。常见误区是以为给某个卡片里的头像加了 z-index: 999 就能盖过整个页面的弹窗——其实不行，弹窗如果在另一个独立 Grid 或定位元素里，它的层叠上下文更高。
- 验证方法：检查父元素是否设置了
transform、opacity 、will-change、filter等触发新层叠上下文的属性 - 关键点：Grid 项目之间的
z-index比较只发生在同一 Grid 容器内；跨容器重叠必须靠容器自身的z-index控制 - 性能提示：频繁改
z-index不触发重排，但若伴随transform或opacity动画，可能意外提升层叠层级，引发意料外遮挡
重叠区域点击事件默认穿透不到底层项目
视觉上盖住了，但鼠标点击仍会落到下面的项目上——除非显式阻止。这是因为 CSS 层叠不影响事件流，事件捕获/冒泡照常进行，底层元素依然可响应 click。
- 想让上层完全拦截：给顶层项目加
pointer-events: auto;（默认值），确保它自己能响应；同时确认底层没设pointer-events: none; - 想让点击穿透到底层：顶层加
pointer-events: none;，但此时它自身也无法响应 hover/click - 精细控制：用
pointer-events: auto;+ JavaScript 在顶层监听click后手动触发底层逻辑，避免 DOM 事件穿透带来的不确定性
真正难的是多层重叠 + 动态 z-index + 可点击区域不规则——这时候光靠 CSS 不够，得结合 elementFromPoint() 或 document.elementsFromPoint() 做运行时判断。别指望一次写完就稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
