直接给目标网格项设 z-index 即可生效，现代浏览器中无需额外 position: relative；无效常见原因是未触发层叠比较、父容器创建新层叠上下文（如 transform）、或 z-index 为 auto。
直接给目标网格项设 z-index 就行，但必须确保它在 Grid 容器内有层叠上下文——现代浏览器中，z-index 对 Grid 子项默认生效，无需额外加 position: relative（除非要兼容 IE11 或极旧版本）。
为什么有些网格项加了 z-index 却没效果？
常见原因是该元素被其他同级项“盖住”，而根本没触发层叠比较。Grid 中的 z-index 只在**同层网格项之间**起作用，不跨容器；如果某个网格项内部嵌套了另一个绝对定位元素，那它的 z-index 就只管自己这一层，不影响父容器外的兄弟项。
- 检查开发者工具里该元素的
z-index是否被显式设为auto（即未声明），此时按 DOM 顺序堆叠 - 确认没有父容器设置了
transform、filter或will-change，这些会创建新的层叠上下文，把子项“锁”在里面 - 避免对多个网格项同时用
grid-row: span 2+z-index，跨行项若高度不一致，可能因渲染顺序导致视觉遮挡异常
z-index 数值怎么选才不冲突？
数值本身没有魔法，关键是相对关系。只要目标项的 z-index 比它可能覆盖的邻居高就行，不必追求大数字。
- 基础层：普通网格项默认
z-index: auto，等价于0 - 悬浮层：设
z-index: 1通常足够；若已有其他项用了10，那就用11 - 底层锚定项（如背景卡片）可显式设
z-index: -1，但注意它会低于所有默认项，包括body的伪元素
想让悬浮项“浮在所有网格内容之上”，但又不破坏布局流？
别用 position: absolute。它会让元素脱离 Grid 轨道，grid-column 和 grid-row 失效，且无法响应网格的自动重排或 gap。
立即学习“前端免费学习笔记（深入）”；
- 保持
position: static（默认），只靠z-index控制层级 - 若需视觉上“抬高”，用
transform: translateY(-4px)替代margin-top: -4px，避免推挤邻项 - 加阴影时用
box-shadow: 0 4px 12px rgba(0,0,0,0.15)，别依赖margin-bottom模拟深度 - 如果悬浮项内容动态变化（如文字换行），配合
min-height和overflow: hidden防止撑开行高
真正容易被忽略的是层叠上下文的嵌套边界——一个 z-index: 999 的网格项，如果它的父容器（比如某个 .card）被设了 transform: scale(0.99)，那它就永远盖不过同级没 transform 的其他网格项。
