Grid项目重叠是层叠顺序或定位冲突所致；z-index生效需满足两个前提：子元素必须为定位元素（如position: relative），且比较仅在同一层叠上下文中进行。
Grid 项目重叠不是文档流“塌陷”问题，而是层叠顺序失控或定位逻辑冲突的结果；z-index 能起作用，但必须满足两个硬性前提：子元素自身是定位元素，且比较发生在同一层叠上下文中。
为什么 grid 项写了 z-index 却没效果
Grid 容器里的子项默认是 position: static，而 CSS 规范明确规定：z-index 对 static 元素完全无效——无论你写 z-index: 999 还是 z-index: -1，浏览器都会忽略它。
- 必须显式设置
position: relative（或其他非static值）才能激活z-index - 父容器不需要加
position: relative来“开启”子项的层叠能力，那是常见误解 - 如果用
display: contents包裹了子项，它会脱离布局树，z-index失效且无法触发层叠上下文
z-index 只在 Grid 容器内局部生效
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，而非其子项
重叠时点击事件默认穿透到底层
视觉上盖在上面的网格项，如果没设 pointer-events: auto（默认值），点击仍可能触发下方元素的事件——这不是 bug，而是浏览器对叠层交互的默认行为。
- 当上层是装饰性图标、遮罩层或半透明蒙版时，常需手动加
pointer-events: none让点击穿透 - 反之，若上层是按钮或可交互控件，务必确认它没有被父级的
pointer-events: none意外禁用 -
z-index控制视觉层级，pointer-events控制事件捕获层级，二者必须协同设置
真正容易被忽略的是：Grid 中的重叠从来不是“要不要用 z-index”的问题，而是“谁和谁比、在哪一层比、点不点得着”的系统性判断。一旦出现意料外遮挡，先查 position，再查层叠上下文边界，最后看 pointer-events 是否匹配交互意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
