z-index失效的根本原因是元素未处于同一层叠上下文；需确保目标元素已定位（position非static），并排查祖先元素是否因opacity
不能靠“自动”实现自适应重叠顺序——z-index 必须显式控制，且必须确保两个元素处于同一层叠上下文。
为什么 z-index 设了却没效果
常见现象：z-index: 10 和 z-index: 20 的两个 position: absolute 元素视觉上完全没分出前后。根本原因不是数值小，而是它们压根不在同一个比较场里。
- 检查父容器是否意外创建了层叠上下文：比如设置了
opacity: 0.99、transform: translateZ(0)、filter: blur(1px)或will-change: transform - 只要任意一级祖先触发了新上下文，子元素的
z-index就只在该祖先内部生效，跨不出去 - 用浏览器开发者工具逐级点开 Elements 面板，看两个元素最近的共同定位父容器（即
position: relative/absolute/fixed/sticky）有没有上述属性
如何保证它们真正在比
关键动作是“提级”和“归一”：让需要排序的元素共享一个干净的定位容器。
- 把两个
position: absolute元素统一挂到同一个position: relative父容器下（哪怕这个父容器只是个空div） - 确保该父容器没有触发层叠上下文的属性（如
opacity、transform、filter等） - 所有参与排序的子元素都显式设置
z-index，不要混用auto和数字值（z-index: auto等价于0，但不创建上下文；一旦有人设了1，其他auto就变成0，顺序立刻失控）
想让后插入的自动置顶，JS 怎么做才稳
CSS 本身不支持“自动递增层级”，必须靠 JS 主动管理。硬写 z-index: 99999 是掩耳盗铃，容易和第三方库冲突（比如 antd 默认用 1050）。
- 维护一个全局计数器，每次插入新元素时
z-index加 1 - 或者读取当前最高
z-index：getComputedStyle(el).zIndex，再 +1 赋值（注意返回可能是"auto"，需 fallback） - 更推荐用 CSS 自定义属性统一调度，例如在
:root定义--z-modal: 1000，新弹窗用z-index: calc(var(--z-modal) + 1)
最常被忽略的一点：绝对定位元素的层叠关系，永远取决于「谁和谁比」以及「在哪比」，而不是写了多大的数字。数值再大，卡在错误的层叠上下文里，也盖不过隔壁容器里一个 z-index: 1 的元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
