z-index在Grid子项上直接写无效，必须配合position: relative等定位属性才能生效；因子项默认position: static，而z-index仅对非static元素起作用，且受层叠上下文限制。
z-index 在 Grid 子项上直接写无效，必须配合 position: relative 才能生效；重叠本身靠 grid-column/grid-row 实现，“谁在上”由 DOM 顺序和 z-index 共同决定，但 z-index 只在定位元素间起作用。
为什么写了 z-index 却没效果？
因为 Grid 子项默认是 position: static，而 z-index 对 static 元素完全忽略。这不是 Grid 的 bug，是 CSS 层叠规则本身的要求。
- 检查开发者工具的 Computed 面板，确认目标元素的
position值不是static - 最稳妥写法：
.item { position: relative; z-index: 2; }——relative不影响 Grid 布局位置，只激活层叠能力 - 别用
position: absolute单纯为了启用z-index，否则它会脱离 Grid 轨道，无视grid-column等设置
grid-column 和 grid-row 怎么写才能真正重叠？
重叠的前提是多个元素占据同一网格区域。靠 grid-area 命名区域也能实现，但行列语法更可控、易调试。
- 合法重叠写法：
grid-column: 2 / 3;（占第 2 列）、grid-column: 2 / -1;（从第 2 列延伸到末尾） - 危险写法：
grid-column: 2 / 2;→ 区域宽度为 0，元素不可见 - 避免只写起点：
grid-column: 2;等价于2 / 3，看似没问题，但容易误判实际跨度 - 命名区域冲突时，
grid-template-areas中同一名称被多个元素引用，就会自然重叠 —— 这不是错误，是规范行为
父容器意外创建了层叠上下文怎么办？
如果 z-index 加了、position 也设了，还是不按预期堆叠，大概率是父容器（grid-container）触发了新的 stacking context。
立即学习“前端免费学习笔记（深入）”；
- 常见触发属性：
opacity: 0.99、transform: translateZ(0)、filter: blur(2px)、will-change: transform - 验证方法：在 DevTools 的 Computed 面板中搜这些属性，临时移除它们看
z-index是否恢复 - 替代方案：需要模糊背景时用
backdrop-filter: blur(4px)替代filter: blur()；需要半透明又不想触发上下文，改用background: rgba()而非opacity - 注意：
z-index比较只在同一个 Grid 容器内有效；跨容器重叠必须控制外层容器的z-index，而非子项堆数值
移动端 Safari 或旧浏览器有兼容性坑吗？
iOS 15.4 之前的 Safari 对 Grid 子项上的 z-index 支持不完整，尤其混用 transform 动画或 will-change 时，可能出现层级错乱或闪烁。
- 这不是代码问题，而是渲染引擎 bug，无法通过调整 CSS 规避
- 降级策略：对关键重叠区域（如悬浮卡片），不塞进 Grid 内部，改用
position: fixed或挂到<body>下统一管理 - 避免在 Grid 项上同时使用
grid-area和top/left偏移，容易引发定位模式冲突
真正要控制的从来不是“怎么让它叠上去”，而是“谁该在哪个位置、以什么层级被看见”——grid-column 定义空间归属，position 激活层叠能力，z-index 提供精细调节，三者缺一不可，顺序也不能颠倒。
