应优先通过 layer.config({ zIndex: xxx }) 全局设置基准值,且必须在所有 layer.open() 之前执行;硬写 zIndex 参数会破坏 Layui 自动递增机制,导致遮罩层覆盖、弹窗交互失效等问题。
直接改 layer.config({ zindex: xxx }),且必须在所有 layer.open() 之前执行——这是唯一安全、可维护的全局调整方式。
为什么不能在 layer.open() 里写 zIndex 参数
手动传 zIndex: 200000 看似简单,但会绕过 Layui 的自动递增机制。它内部靠 config.zIndex + times 计算真实值,times 是弹窗打开次数计数器。一旦你硬写固定值,后续新弹窗可能比遮罩层(.layui-layer-shade)还低,导致:
- 点击弹窗无响应、拖拽失效
-
<select>下拉被盖住或点不动 - 连续打开两个弹窗后,第二个关不掉、第一个变灰
正确设置全局基准值:layer.config()
这个调用只生效一次,且仅对之后所有 layer.open() 生效。必须放在 layui.use('layer', ...) 内部、任何 open 调用之前:
layui.use('layer', function(){
var layer = layui.layer;
// ✅ 正确:只执行一次,且最早
layer.config({ zIndex: 1100 });
layer.open({ type: 1, content: '第一层' });
layer.open({ type: 1, content: '第二层' }); // 自动是 1101
});
注意:zIndex 值不是越高越好。建议查清页面最高元素的 z-index(比如导航栏),再加 100 左右,避免和第三方组件(如 UEditor、echarts tooltip)冲突。
遇到弹窗被导航栏盖住?先确认 stacking context
即使你设了 zIndex: 3000,如果父容器有 transform、filter 或 opacity < 1,就会创建新的 stacking context,导致弹窗层级“被截断”:
- 用浏览器开发者工具检查
.layui-header或body是否带transform: translateZ(0)等属性 - 若存在,要么移除该属性,要么让导航栏也进入同一 context(例如给它也加
transform: translateZ(0)并统一调高它的z-index) - Layui 2.8+ 可尝试
{ appendTo: 'body' }强制挂载到顶层 context
真正容易被忽略的点
改了 layer.config({ zIndex: xxx }) 后,所有依赖相对层级的内置行为都会偏移——包括遮罩层、tips 层、加载层(layer.load())、甚至 layer.tips() 的箭头位置计算。这些细节 Layui 内部隐式耦合,不会报错,但会在多层交互中缓慢暴露问题。所以别轻易动基准值,优先排查是不是 DOM 结构、CSS 定位或 stacking context 导致的假“层级不足”。


















