Layui如何修改默认的弹出层层级z-index值-Layui教程-PHP中文网

应使用 layer.config() 全局设置 zindex 起始值，且必须在所有 layer.open() 之前执行；手动在 open 中设 zindex 会破坏 layui 自动递增机制，导致遮罩层错乱、select 被盖等问题。

直接改 layer.config() 就行，但必须在所有 layer.open() 之前执行，否则无效。

为什么不能在 `layer.open()` 里设 `zIndex`？

因为 Layui 的 z-index 自动管理机制本身是可靠的——每次新弹窗都会比前一个高。手动写 zIndex: 200000 反而容易破坏这个链式递增逻辑，尤其在连续打开/关闭多个弹窗时，会导致遮罩层（.layui-layer-shade）层级错乱，出现点不动、关不掉、select 下拉被盖住等问题。

常见错误现象包括：

第二次打开弹窗后，里面的 <select></select> 点击无反应或下拉内容不可见
弹窗标题可拖拽，但内容区域无法点击
确认框弹出后，背景遮罩变半透明甚至消失

正确修改默认基准值：用 `layer.config()`

这是唯一推荐的全局调整方式。Layui 默认 zIndex 是 19891014，它只是一个起始值，后续所有弹窗在此基础上递增。

实操建议：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

在引入 layui.js 后、任何 layer.open() 前，立即调用 layer.config()
基准值建议设为页面中已知最高 z-index + 100，比如导航栏用了 z-index: 1000，就设 { zIndex: 1100 }
不要设成过大的数（如 999999），避免和其它 UI 库（如 UEditor、百度富文本）冲突

示例：

layui.use('layer', function(){
  var layer = layui.layer;
  // 必须放在这里，且只执行一次
  layer.config({ zIndex: 1100 });
  
  // 后续所有 layer.open() 都会从 1100 开始递增
  layer.open({ type: 1, content: 'Hello' });
});

遇到 select 被遮盖？别改源码，先检查 DOM 结构

老方案里常提“修改 layer.js 去掉 +a”，这本质是强行固定 z-index，但会彻底禁用 Layui 的自动置顶逻辑，导致多层弹窗无法交互。实际问题往往出在：

<select></select> 外层容器设置了 z-index 但没配 position（必须是 relative/absolute/fixed 才生效）
页面用了 CSS transform（如 transform: scale(1)），导致 fixed 定位的弹窗参照系异常
第三方组件（如 UEditor）自己设了 zIndex: 100，但没留余量，和 Layui 默认值撞车