grid项点击失效的根源是z-index未生效（因position非static）与pointer-events未配对；需确保目标元素设position:relative、父容器不误建层叠上下文、且pointer-events为auto。
Grid 项重叠本身不会导致点击失效，真正让点击“点不着”的，是 z-index 没生效 + pointer-events 没配对。
为什么写了 z-index 却点不到？
因为 Grid 子项默认是 position: static，而 CSS 规范规定：z-index 对 static 元素完全无效——无论你写 z-index: 999 还是 z-index: -1，浏览器都会忽略它。
- 必须给目标元素显式加
position: relative（或其他非static值），z-index才开始参与层叠排序 - 父容器不需要加
position: relative来“开启”子项的z-index，那是常见误解 - 如果用了
display: contents包裹子项，它会脱离布局树，z-index直接失效
为什么视觉上盖住了，点击却穿透到底层？
这是浏览器默认行为：pointer-events 控制事件捕获，和 z-index 控制视觉层级是两套独立机制。上层元素若没设 pointer-events: auto（它是默认值），但被父级继承了 none，或自身被设为 none，点击就会直接穿过它。
- 检查该元素及其所有祖先的
computed pointer-events，只要有一个是none，就可能拦截失败 -
pointer-events: none会向下继承，子元素需单独设pointer-events: auto才能响应 - 装饰性图标、遮罩层、半透明蒙版常需
pointer-events: none；按钮、开关等交互控件务必确认没被意外禁用
跨容器重叠时，z-index 为什么总不管用？
Grid 容器自身会创建一个新的层叠上下文（stacking context）。这意味着所有子项的 z-index 只在该容器内部比较，不会穿透到外部 DOM 结构中。
- 你在卡片头像上写
z-index: 9999，也盖不过同页面另一个position: fixed的弹窗——因为两者不在同一个层叠上下文中 - 检查父级是否意外触发了新层叠上下文：比如设置了
opacity: 0.99、transform: translateZ(0)、filter: blur(1px)或will-change: transform - 若需跨容器控制遮挡关系，只能提升容器自身的
z-index，而非其子项
真正容易被忽略的是：Grid 中的重叠从来不是“要不要用 z-index”的问题，而是“谁和谁比、在哪一层比、点不点得着”的系统性判断。一旦出现意料外遮挡，先查 position，再查层叠上下文边界，最后看 pointer-events 是否匹配交互意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
