要实现网格项重叠遮罩，需确保grid-area一致且父容器显式声明grid-template-areas；必须设position: relative才能使z-index生效；遮罩层推荐用z-index: 10并检查pointer-events是否为auto。
直接让两个网格项重叠实现遮罩效果，关键不是“怎么放进去”，而是“怎么确保它们真叠在一起且层级可控”——grid-area 相同只是起点，缺了 position 和 z-index 就等于没设。
grid-area 值一致是重叠的前提，但不保证视觉生效
多个元素写 grid-area: "mask"，前提是父容器已用 grid-template-areas: "mask" 显式声明该区域名。漏掉这一步，浏览器会回退到自动布局，元素挤在左上角，根本不会重叠。
- 检查拼写：全角引号
“mask”、中文空格、大小写混用（"Mask"≠"mask"）都会导致匹配失败 - 行列数必须对齐：三列布局中写
"mask mask"而不是"mask mask ."，会导致第二行偏移，区域错位 - 命名区域只定义位置，不控制层叠顺序——DOM 顺序决定谁在上，后写的元素默认盖住前面的
必须加 position: relative 才能让 z-index 生效
z-index 在 position: static（默认值）下完全被忽略。想让遮罩层稳稳盖在内容上，就得给它显式定位。
- 遮罩层推荐写：
.overlay { grid-area: "mask"; position: relative; z-index: 10; } - 被遮罩的内容层可不加
z-index，或设为z-index: 1，避免意外穿透 - 别用
position: absolute：它会让元素脱离 Grid 轨道，grid-column和grid-row失效，遮罩尺寸和响应式行为难控制
用 grid-row / grid-column 更容易调试重叠边界
比起依赖命名区域，直接指定行列线更直观，尤其当遮罩只需覆盖局部（比如卡片右下角图标）时。
- 示例：
.content { grid-row: 1 / 2; grid-column: 1 / 2; }和.mask { grid-row: 1 / 2; grid-column: 1 / 2; }确保二者占据完全相同的单元格 - 支持负值：
grid-column: -2 / -1可精准定位到最后一列，适合动态宽度场景 - 交集即重叠：只要
grid-row和grid-column的范围有重合（如 A 是2 / 4，B 是3 / 5），就会产生视觉重叠
遮罩层点击穿透问题常被忽略
视觉上盖住了，但鼠标事件仍可能落到下层元素上——这不是 bug，是默认行为。如果遮罩需要拦截交互（比如关闭按钮或背景点击收起），必须加 pointer-events: auto（遮罩层默认就是 auto，但若父级设了 pointer-events: none 就会失效）。
- 确认遮罩层没有
pointer-events: none - 若内容层有
pointer-events: none，记得在遮罩层里显式覆盖回来 - 重叠区域的渲染顺序、
z-index、pointer-events三者必须协同，少一个都可能导致交互异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
