应使用 closest() 动态查找最近蒙层容器并计算 z-index，而非全局递增；需统一语义化容器（如 .overlay-root），排除堆叠上下文干扰，最后 fallback 到 body 全局最大值。
在多层蒙层（如弹窗遮罩、Tooltip、Dropdown）级联嵌套时，直接写死 z-index 容易冲突或失效；而用 closest() 动态查找当前最高层级的蒙层，再基于它推算新层的 z-index，是一种更健壮、可扩展的方案。
为什么不能只靠全局递增？
全局计数器（如 nextZIndex()）适合简单场景，但遇到以下情况会出问题：
- 多个独立浮层系统共存（比如 Modal + Select + Toast 同时打开）
- 某层被手动移除但计数未回退，导致后续 z-index 断层
- 服务端渲染或 SSR 场景下，客户端首次加载时无法感知已存在的 DOM 层级
- 动态插入的第三方组件（如广告浮层）绕过你的管理逻辑
用 closest() 定位最近的“父级蒙层”容器
关键前提是：所有蒙层都统一包裹在一个语义化容器中（例如 class="overlay-root"），或至少共享一个可识别的祖先类（如 .el-overlay、.modal-backdrop）。这样就能用 closest() 向上找最近的已激活蒙层。
示例结构：
<div class="overlay-root">
<div class="el-overlay" style="z-index: 1999"></div>
<div class="el-dialog" style="z-index: 2000">
<div class="overlay-root">
<div class="el-overlay" style="z-index: 2000"></div>
<div class="el-dialog" style="z-index: 2001"></div>
</div>
</div>
</div>JS 中获取当前上下文最高 z-index：
function getCurrentMaxZIndex(triggerEl) {
const parentOverlay = triggerEl.closest('.overlay-root, .el-overlay, .modal-backdrop');
if (!parentOverlay) return 2000; // 默认基准
<p>// 查找该上下文内所有带 z-index 的浮层元素
const zIndexes = Array.from(
parentOverlay.querySelectorAll('[style*="z-index"]')
).map(el => {
const val = getComputedStyle(el).zIndex;
return isNaN(parseInt(val)) ? 0 : parseInt(val);
});</p><p>return Math.max(...zIndexes, 0) + 1;
}结合堆叠上下文做安全兜底
仅靠 closest() 找到的 z-index 还需确认是否处于同一堆叠上下文。若触发元素的父容器已触发新上下文（如 transform、opacity: 0.99），那它的子层 z-index 就只在内部有效——此时应跳过该父级，继续向上找真正“可穿透”的上下文根。
推荐做法：
- 给每个主动创建堆叠上下文的容器加 data 属性，如
data-stacking-context="true" - 在
closest()链路中排除这类节点，改用closest(':not([data-stacking-context])')或手动遍历 parentNode - 最终 fallback 到 document.body 下所有浮层的全局最大值
实际调用示例（打开嵌套弹窗）
假设点击一个按钮要打开子级对话框：
document.querySelector('.open-nested-modal').addEventListener('click', function(e) {
const baseZ = getCurrentMaxZIndex(this);
<p>// 创建新遮罩层（z-index = baseZ - 1）
const overlay = document.createElement('div');
overlay.className = 'el-overlay';
overlay.style.zIndex = baseZ - 1;</p><p>// 创建新对话框（z-index = baseZ）
const dialog = document.createElement('div');
dialog.className = 'el-dialog';
dialog.style.zIndex = baseZ;</p><p>// 插入到最近的 overlay-root，或 body
const root = this.closest('.overlay-root') || document.body;
root.append(overlay, dialog);
}); 
