z-index 在 grid 项目中不生效，主要是因未设置 position（如 relative）；grid 重叠需共享同一网格区域，堆叠顺序由 dom 顺序和 z-index 共同决定，且受层叠上下文影响。
z-index 在 Grid 项目里不生效，大概率是因为没加 position
Grid 容器本身不创建层叠上下文，z-index 对 position: static（默认值）的子元素完全无效。你写了 z-index: 99 却没反应，第一反应不是“CSS 写错了”，而是检查 position 是否已显式设置。
-
position: relative最安全：不脱离文档流，不影响 Grid 轨道对齐，仅激活z-index - 避免用
position: absolute—— 它会让元素脱离 Grid 布局轨道，grid-column和grid-row将被忽略 -
position: sticky或fixed也可用，但需注意其脱离上下文的影响范围
重叠必须靠 grid-column / grid-row 主动“填进同一个格子”
Grid 中的视觉重叠不是靠“盖上去”，而是靠多个元素共享同一网格区域。写错 grid-column 会导致元素不可见或错位。
- 合法写法只有两种：
grid-column: 2 / 3（占第 2 列格子），或grid-column: 2 / -1（从第 2 列跨到末尾） -
grid-column: 2是简写，等价于grid-column: 2 / 3，可用；但grid-column: 2 / 2区域宽度为 0，元素消失 -
grid-row同理，必须保证起止线不重合，且落在容器定义的轨道范围内
堆叠顺序由 DOM 顺序 + z-index 共同决定，grid-column 不参与排序
当两个元素都设了 grid-column: 1 / 2; grid-row: 1 / 2; 且都加了 position: relative，谁在上取决于两件事：
- DOM 顺序：后写的元素默认压在前一个上面（即使
z-index相同） - 同 DOM 顺序下，
z-index大的在上；但若两者z-index都是auto，则只看 DOM 顺序 -
grid-column只负责“在哪重叠”，不决定“谁在上”——它不是排序依据
响应式切换 display: grid ↔ flex 时 z-index 行为会突变
在媒体查询中动态切换容器的 display，容易忽略底层机制差异：
- Grid 中，层叠顺序主要靠 DOM 顺序 +
z-index（前提是定位） - Flex 中，
order属性会影响渲染顺序，进而影响层叠——哪怕z-index相同，order: 2的项也可能盖住order: 1的项 - 如果父容器在某断点下触发了
transform或opacity: 0.99，会意外创建新层叠上下文，导致子元素z-index失效
真正难处理的不是怎么写 z-index，而是判断当前元素到底属于哪个层叠上下文——尤其当祖先节点用了 filter、will-change 或半透明背景时，z-index 就不再是“写大一点就行”的问题了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
