必须显式设置 position: relative 和 z-index 才能可控重叠，仅 grid-area 相同和 opacity 无效；opacity 不影响层叠顺序与事件捕获，需配合 pointer-events 控制交互。
能实现，但仅靠 grid-area 相同 + opacity 不足以保证可控重叠 —— 必须显式控制层叠顺序和定位状态，否则上层图层可能点不中、阴影不生效、或 Safari 中完全失效。
为什么 grid-area 相同却没重叠效果
浏览器把所有 grid-area: "layer" 的元素都放进那个区域，但默认按 DOM 顺序堆叠（后写的盖前面），opacity 只影响透明度，不改变谁在上谁在下。更关键的是：z-index 在 position: static（默认值）下完全无效，而 Grid 项目默认就是 static。
- 常见错误：只写
grid-area: "layer"和opacity: 0.7，没加position: relative→z-index不起作用，层级不可控 - DOM 顺序不可靠：React 或 Vue 中动态插入的元素顺序会变，不能靠“谁写在后面”来赌渲染结果
- 父容器若设了
transform、opacity: 0.99或filter，会创建新层叠上下文，子项z-index就锁死在内部，无法盖过兄弟容器
必须加 position: relative 才能用 z-index 控制透明图层顺序
Grid 项目虽然参与网格布局，但要激活 z-index，仍需显式定位。用 position: relative 最安全：不脱离文档流，不影响 grid-column / grid-row 行为，且兼容所有现代浏览器。
- 给底层图层设
position: relative; z-index: 1; - 给上层半透明图层设
position: relative; z-index: 2; opacity: 0.6; - 避免用
position: absolute：它会让元素脱离 Grid 轨道，grid-area失效，响应式错位风险高 - 别漏掉
z-index值 —— 不写等于auto，不是 0；两个都写 0 时，仍按 DOM 顺序决定遮挡
opacity 配合 transform: translateZ 实现真实深度感
单纯 opacity 只是变淡，没有空间感。要模拟图层“抬高”，必须加 transform: translateZ()，再配不同强度的 box-shadow，才能让视觉有前后纵深。
- 上层图层建议
transform: translateZ(8px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); - 底层图层保持
translateZ(0)，阴影更轻：box-shadow: 0 2px 4px rgba(0,0,0,0.1); - Safari 旧版本可能忽略
translateZ，需补z-index保底；Firefox 中若父容器有will-change: transform，也可能干扰 - 不要用百分比单位写
translateZ（如translateZ(5%)），它依赖容器尺寸，缩放时深度失真
点击穿透问题：opacity 不等于 pointer-events
半透明图层盖住下面的内容，但鼠标悬停/点击仍可能触发底层元素 —— 因为 opacity 不影响事件捕获，默认是“穿透”的。这不是 bug，是 CSS 规范行为。
- 若上层图层需拦截交互，加
pointer-events: auto;（默认值，已生效） - 若上层只是装饰、不希望抢焦点，加
pointer-events: none;，让点击直接透到下层 - 注意：一旦设了
pointer-events: none;，该图层上的:hover、click事件全部失效，包括其子元素 - 调试时可用 DevTools 的 “Show grid areas” + “Toggle element screenshot” 快速确认图层是否真重叠、是否被
overflow: hidden裁掉
最容易被忽略的一点：重叠图层的 z-index 是相对父 Grid 容器而言的，跨容器覆盖（比如 toast 盖住侧边栏）必须提升整个容器的 z-index，而不是只调子项。另外，opacity 小于 1 的父容器会强制创建新层叠上下文，这点在嵌套 Grid 场景中极易踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
