层叠上下文 z-index 的简单理解

参考文章

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

1. 基础规则补充：`position: fixed` 自动创建层叠上下文

实测及规范确认：position: fixed 的元素不需要再设 z-index，自身就会创建新的层叠上下文 。这与 absolute 必须同时显式指定 z-index 才触发不同，fixed 天生就是"官"。

2. 工程化实践：用 `nextZIndex` 替代硬编码

Vue3 + Element Plus 项目中，禁止手动硬编码超大 z-index （如 9999），极易引发全局层级冲突。

应当使用 useZIndex 提供的全局递增能力，让后出现的浮层自然覆盖先出现的。 关键要点 ：不要直接在模板里调用 nextZIndex()，否则每次渲染都会递增，计数器会疯涨。正确做法是在 onMounted 中初始化一次：

scss 复制代码

import { useZIndex } from 'element-plus'
const { nextZIndex } = useZIndex()
const modalZIndex = ref(0)
onMounted(() => {
  modalZIndex.value = nextZIndex()
})

3. 不想全局竞争时：手动创建局部层叠上下文

如果某个区域的浮层不想参与全局 z-index 比较，可以给父容器创建一个局部层叠上下文，这样内部元素的层级只在当前容器内有意义，不会与外层元素互相干扰。

推荐零副作用方式：

css 复制代码

.parent {
  isolation: isolate;
}

这个属性唯一的作用就是创建层叠上下文，不影响布局、不改变视觉表现、无性能开销。

其他备选方式（各有副作用，视场景选用）：position: relative/fixed + z-index: 0、opacity < 1、transform 等。

4. 需要完全跳出限制时：使用 `Teleport` 挂载到 `body`

当需要展示全屏弹窗、抽屉，或者浮层被父级的 overflow、transform 等属性限制时，使用 Teleport 将 DOM 传送到 body，直接进入根层叠上下文。

el-dialog ：默认 append-to-body 为 false，即 DOM 留在原地。若需要跳出父级限制，应手动开启 :append-to-body="true"，其底层就是 Teleport。
el-tooltip ：默认 teleported="true"，已传送到 body，会自动使用组件库的全局递增层级。

5. 总结：三条黄金法则

组件库内置递增 （nextZIndex）→ 全局比较，省心。
手动创建局部层叠上下文 （推荐 isolation: isolate）→ 隔离内部竞争，避免全局冲突。
Teleport 到 body（需要时手动开启）→ 物理逃离限制，配合全局递增机制使用。