z-index失效主因是元素被限制在独立层叠上下文中，其值仅在该上下文内生效；常见触发条件包括position: relative + z-index: 0、opacity
z-index 不生效？先查它是不是在独立层叠上下文中
绝大多数 z-index 失效问题，不是写错了值，而是元素被“关进了一个小房间”——它自己或某个父级创建了层叠上下文，导致 z-index 只在那个房间内有效，对外部完全无感。
常见触发层叠上下文的条件包括：
position: relative+z-index: 0、opacity: 0.99、transform: translateY(0)、will-change: transform、isolation: isolate。只要满足其一，该元素就变成一个“隔离卡”，内部所有子元素的 z-index 都只跟这张卡比，不跟外面比。
- 比如你给一个
.modal设置z-index: 9999，但它父容器有opacity: 0.99，那这个 modal 实际上只是它父级层叠上下文里的“最高层”，可能仍被隔壁没 opacity 的导航栏盖住z-index: auto不会创建层叠上下文；z-index: 0（配合定位）会——这点常被忽略，以为设 0 是“不干预”，其实是主动建墙- Flex/Grid 容器的子元素只要
z-index不是auto，哪怕没设position，也会立即创建新层叠上下文父子元素层级关系不等于视觉层级关系
HTML 结构上的父子嵌套，和 CSS 渲染时的 Z 轴顺序毫无必然联系。真正起作用的是层叠上下文的嵌套结构，而不是 DOM 树结构。
例如：
<div class="parent"><div class="child"></div></div>，如果.parent有opacity: 0.5，那么.child再怎么设z-index: 99999，也出不了 parent 这张“卡”的边界——它对外部来说，就是一张整体卡片，Z 值由 parent 的层叠水平决定。
- 用 Chrome DevTools 的
Layers面板（或勾选Rendering > Paint flashing+Show layer borders）能直观看到哪些元素被划入了独立层叠上下文- 父级一旦创建层叠上下文，子元素的
z-index就只用于排序彼此，不再参与外层竞争；就像公司部门经理再大，也不能越过 CEO 直接向董事会汇报- 想让子元素“破壁”，最直接的办法是把子元素移出该父级（DOM 搬家），或让父级取消触发层叠上下文的属性（如改
opacity: 1）多个层叠上下文相遇时，谁说了算？
当两个互不隶属的层叠上下文（比如并列的两个 modal）发生重叠，浏览器不比较它们内部的
z-index，而是按“创建者在全局层叠顺序中的位置”来决定谁在上——也就是看它们各自所属的层叠上下文根节点，在整个页面层叠顺序里的相对层级。这个顺序由 CSS 规范定义：根元素（
）最底层；之后是z-index: -1的定位元素；再往上是普通文档流块级元素；然后是z-index: 0或 auto 的定位元素；最后是z-index: 1+的定位元素。每个层叠上下文都占据其中某一层，它的整体 Z 位置就由这个“根层级”决定。
- 所以两个 modal 谁压谁，关键不是看它们各自的
z-index值，而是看它们的直接父级是否处于同一层叠上下文、以及各自父级的层叠水平- 若一个 modal 是
直接子元素（且没触发层叠上下文），另一个是嵌套在opacity: 0.9容器里的，前者大概率会盖过后者，哪怕后者内部z-index更高- 调试时可临时给疑似“弱势方”的外层加
position: relative; z-index: 1000;，但要确认它没被更外层的层叠上下文包裹，否则只是给小房间升职，不是搬进大楼顶层用 isolation: isolate 主动隔离，而非被动踩坑
isolation: isolate是少数几个**明确设计用来创建层叠上下文却不附带副作用**的属性——它不会像opacity那样影响透明度，也不像transform那样触发重排重绘，纯粹为“我要自立门户”服务。适合用在需要精细控制局部层级又不想污染全局的场景，比如弹窗组件、悬浮工具栏、或一组需独立 Z 排序的卡片组。
实际开发中，最易被忽略的不是“怎么设 z-index”，而是“这个 z-index 到底跟谁比”。层叠上下文不是 bug，是机制；问题往往出在预期和机制错位——你以为在跟全局比，其实一直在跟隔壁同事比。
- 对比
transform: translateZ(0)：虽也能建上下文，但会强制 GPU 加速，可能引发闪烁或内存占用上升；isolation: isolate语义清晰、开销可控- 注意兼容性：
isolation在 IE 完全不支持，Safari 从 15.4+ 开始支持，现代项目基本可用，但需确认目标环境- 不要滥用：每多一个层叠上下文，浏览器就要多维护一套 Z 排序逻辑，过度嵌套会导致渲染变慢，尤其在动画频繁区域
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
