z-index 失效主因是父容器创建了层叠上下文，导致子元素 z-index 仅在内部生效；常见触发属性包括非 static 的 position 加 z-index、opacity
z-index 不生效？先确认父容器有没有“层叠上下文”
绝大多数 z-index 失效，根本不是值写小了，而是它压根没被浏览器当作“可排序的层”——因为父元素创建了新的层叠上下文，把子元素的 z-index 锁死在内部了。
常见触发层叠上下文的属性：position 非 static + z-index 有值、opacity 小于 1、transform 有值、filter 有值、will-change 指定相关属性等。
- 检查目标元素的任意一个父级是否满足上述任一条件；如果满足，它的子元素的
z-index只在该父级内部比较，不会和外部兄弟元素比 - 调试时临时给疑似父容器加
outline: 1px solid red，快速定位作用域边界 - 想让子元素真正“浮出来”，要么移除父级的层叠上下文（比如去掉
transform），要么把该子元素提级到更高层的 DOM 位置（比如用portal或body直接挂载）
relative 定位 + z-index 的典型误用场景
很多人给 position: relative 元素设 z-index 是为了“盖住后面的内容”，但忘了：它只影响自身在**同层叠上下文内**的绘制顺序，不改变文档流占位——后面元素依然按原位置渲染，可能视觉上“穿出来”。
- 若需遮挡后续流式内容，必须配合
top/left/right/bottom偏移，或改用position: absolute -
position: relative的z-index在兄弟元素间才起作用；跟它后面非定位元素之间，仍遵循文档流默认层叠规则（后出现的元素自然在前） - 不要依赖
z-index来“修正布局错位”，那是position类型和偏移量的事
多层嵌套下 z-index 数值怎么设才不翻车
没有全局最大值，只有相对层级。数值本身无意义，关键看它们在**同一层叠上下文中的相对大小**。
- 不同层叠上下文之间，只比较“最顶层”的
z-index；子层内部再大，也赢不过父层整体更小的z-index - 避免用超大数字（如
9999）硬撑，容易在后续嵌套中被迫升级成99999，失控；推荐按模块划分区间：弹窗层100–199，提示层200–299，遮罩层300 - 使用 CSS 自定义属性统一管理：
--z-modal: 100;，然后z-index: var(--z-modal);，改一处全更新
fixed / sticky 元素的 z-index 特殊行为
position: fixed 和 position: sticky 元素会脱离普通文档流，直接相对于视口或最近滚动祖先定位，但它们的层叠逻辑仍受父级层叠上下文约束。
- 即使
z-index: 9999，如果父容器是opacity: 0.99，整个 fixed 元素仍会被锁在那个层叠上下文中，无法盖过页面其他区域 -
sticky在未粘住时表现如static，粘住后才进入新层叠上下文——这意味着它的z-index效果是动态切换的，容易在滚动临界点出现意外遮挡 - 对 fixed 元素做动画时慎用
transform，它会隐式创建层叠上下文，导致原本设计好的层级关系失效
z-index 的复杂性不在数值本身，而在于层叠上下文像一层层透明盒子套着；你得先看清哪几层是“通透的”，哪几层是“封死的”，才能决定把东西塞进哪个盒子、标多大号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
