z-index 在 css grid 子项上必须配合 position（如 relative）才能生效，否则被忽略；所谓“不需要”实为误将 dom 顺序当作 z-index 效果。
它需要 —— 这个说法本身是错的。z-index 在 CSS Grid 子项上**必须配合 position 才能生效**，position: relative 是最常用、副作用最小的选择。不存在“不需要”的情况，只是有人误把 DOM 顺序当成了 z-index 的替代方案。
grid 子项设了 z-index 却没反应？先看 position
这是最常踩的坑：给 .grid-item 写了 z-index: 10，但元素仍是默认的 position: static。浏览器直接忽略该 z-index 值，不报错也不警告。
-
z-index只对position值为relative、absolute、fixed或sticky的元素起作用 - Grid 布局本身不改变元素的
position默认值；grid-column和grid-row不会自动触发定位行为 - 检查开发者工具的 “Computed” 面板，确认
position确实不是static
为什么有人觉得“没加 position 也有效”？
那其实是靠 DOM 顺序（源顺序）实现的视觉覆盖，不是 z-index 在起作用。
- Grid 子项默认按 HTML 中的出现顺序层叠：后写的元素天然盖在先写的上面
- 如果恰好你把要“置顶”的元素写在最后，又没设任何
z-index，它看起来就像“自动置顶”了 - 但这和
z-index无关；一旦中间插入新元素，或用 JS 动态插入，顺序就不可控
grid 容器要不要加 position: relative？
取决于你是否在子项中使用 position: absolute。
- 如果只是用
position: relative + z-index控制层叠，grid 容器不需要加position - 但如果某个子项用了
position: absolute，而你想让它相对于 grid 容器定位（比如居中遮罩），就必须给容器加position: relative，否则它会相对于视口或最近已定位祖先定位 - 注意：
transform、opacity: 0.99、will-change等属性也会让容器意外创建新的层叠上下文，导致子项z-index行为异常
真正影响 z-index 生效的关键点
不是 Grid，而是层叠上下文的嵌套关系。
- 父容器若设置了
isolation: isolate或opacity ，会强制创建新层叠上下文，子项的 <code>z-index只在该上下文中比较，无法越过边界影响外部元素 - 多个子项都设了
z-index，但数值接近（如z-index: 2和z-index: 3），一旦某处加了transform或filter，整个上下文可能被重排，顺序突变 - 无障碍与可维护性：过度依赖
z-index数值比大小，不如控制 DOM 顺序 + 最小化使用position: relative
最稳的做法永远是：想盖住别人，就把它放在 HTML 里更靠后的位置；非要动态控制，就只给那个元素加 position: relative 和一个明确的 z-index，其余保持默认。别省那行 position: relative —— 它不是装饰，是开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
