z-index 无效的主因是元素未定位；必须设 position: relative/absolute/fixed/sticky 才生效，static 下被忽略；父元素含 transform 或 opacity 也会使子元素 z-index 失效。
直接给元素设 z-index 没反应，大概率是因为它没定位——z-index 必须配合 position: relative、absolute、fixed 或 sticky 才生效，对默认的 static 元素完全无效。
为什么加了 z-index 还是不叠？
最常见原因是：目标元素的 position 仍是 static（HTML 默认值），此时 z-index 被浏览器直接忽略。
- 检查 computed styles，确认
position确实不是static - 哪怕只是微调位置，也得显式写上
position: relative，不能只靠top/left等偏移属性 -
z-index: auto和没写z-index表现不同：前者不创建新层叠上下文，后者仍属默认组，嵌套时可能出意料结果
父容器用了 transform 或 opacity，子元素 z-index 失效了
只要父元素设置了 transform、opacity（filter、will-change 等属性，就会隐式创建新的层叠上下文——子元素的 z-index 只在该父容器内部起作用，无法越过父级和外部兄弟元素比高低。
- 例如：一个
opacity: 0.99的卡片包裹弹窗，即使弹窗z-index: 9999，也盖不住卡片外的导航栏 - 临时解法：把弹窗移出该父容器 DOM 结构；长期解法：避免在需要“穿透层级”的父级上滥用这些属性
- 用浏览器 devtools 的 “Layers” 面板可直观看到层叠上下文边界
z-index 数值该设多少才合理？
不要一上来就写 z-index: 9999。数值本身没有绝对意义，只在同层叠上下文中有效；过大的数会掩盖真实层级关系，后续维护困难。
- 推荐用小整数分组：比如
--z-nav: 100、--z-dropdown: 110、--z-modal: 1000，用 CSS 自定义属性统一管理 - 负值合法：
z-index: -1会让元素沉到父容器背景之下，但仍在父容器内容之前（除非父容器也设了background） - 未设
z-index的定位元素，默认按 HTML 文档流顺序堆叠：后写的盖在先写的上面
真正难的不是写多少个 z-index，而是理清谁创建了层叠上下文、谁在哪个上下文里——DOM 结构 + CSS 属性共同决定渲染顺序，单看一个元素的 z-index 值，往往看不出全貌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
