参考文章
1. 基础规则补充：position: fixed 自动创建层叠上下文
实测及规范确认：position: fixed 的元素不需要再设 z-index，自身就会创建新的层叠上下文。 这与 absolute 必须同时显式指定 z-index 才触发不同，fixed 天生就是“官”。
2. 工程化实践：用 nextZIndex 替代硬编码
Vue3 + Element Plus 项目中，禁止手动硬编码超大 z-index（如 9999），极易引发全局层级冲突。
应当使用 useZIndex 提供的全局递增能力，让后出现的浮层自然覆盖先出现的。 关键要点：不要直接在模板里调用 nextZIndex()，否则每次渲染都会递增，计数器会疯涨。正确做法是在 onMounted 中初始化一次：
import { useZIndex } from 'element-plus'
const { nextZIndex } = useZIndex()
const modalZIndex = ref(0)
onMounted(() => {
modalZIndex.value = nextZIndex()
})
3. 不想全局竞争时：手动创建局部层叠上下文
如果某个区域的浮层不想参与全局 z-index 比较，可以给父容器创建一个局部层叠上下文，这样内部元素的层级只在当前容器内有意义，不会与外层元素互相干扰。
推荐零副作用方式：
.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（需要时手动开启）→ 物理逃离限制，配合全局递增机制使用。
