必须用offset: 'rb'配合手动偏移计算和DOM动态插入实现右下角堆叠消息抽屉；需显式设shade: false、closeBtn: 0，用数组offset精确控制纵向位置，并维护notificationStack管理生命周期。
要在网页右下角实现既不遮挡操作、又能自动堆叠显示的站内消息抽屉式提醒，必须绕开layer默认的单层弹窗逻辑，用offset: 'rb'配合手动偏移计算和DOM动态插入来模拟“抽屉”效果。
基础右下角弹窗配置
先确保layer核心已加载，再调用layer.open。这一步是后续所有功能的前提，缺了会直接报错。
执行 layui.use('layer', function(){...}) → 在回调中声明 var layer = layui.layer; → 调用 layer.open({}) 并传入必要参数。
【offset: 'rb'必须显式设置】，这是Layui唯一识别的右下角方位符；写成 'bottom-right' 或 ['20px','20px'] 都无效，会退回到居中显示。
shade: false 和 closeBtn: 0 是硬性要求：前者防止遮罩层盖住页面按钮，后者避免用户误点关闭正在排队的消息。
实现多条消息垂直堆叠
Layui本身不管理同方位多个弹窗的间距，连续调用 layer.open({offset:'rb'}) 会导致新弹窗直接覆盖旧弹窗。必须自己维护一个计数器，动态计算 top 偏移值。
第一步：在全局作用域定义 let notificationStack = [];
第二步：每次创建新消息前，计算当前应偏移量：const offsetTop = 30 + notificationStack.length * 85;（30为底部基准，85为单条高度+间距）
第三步：把 offset 改为数组格式：offset: [offsetTop + 'px', '30px'] —— 注意这里不能用 'rb'，必须用像素数组才能精确控制纵向堆叠位置。
第四步：将新弹窗的 layer.index 推入栈：notificationStack.push(index);
第五步：监听弹窗销毁事件，在 end 回调里从栈中移除对应 index：end: function(){ notificationStack = notificationStack.filter(i => i !== index); }
添加自动关闭与关闭按钮
方法一：纯自动关闭（适合系统提示）
设置 time: 4000 实现4秒后自动销毁；【不要依赖 time 参数来清理栈】，因为用户可能提前点击关闭，必须在 end 回调中统一处理栈更新。
方法二：带手动关闭按钮（适合重要通知）
content 中嵌入 HTML：content: '<div style="padding:12px;background:#fff;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.08)"><span>✅ 操作成功</span><button class="close-btn" style="float:right;background:none;border:none;cursor:pointer;color:#999;font-size:16px;">×</button></div>'
在 success 回调中绑定关闭逻辑：success: function(layero){ layero.find('.close-btn').on('click', function(){ layer.close(layero.attr('times')); }); }
防遮挡与滚动异常修复
如果右下角弹窗随页面滚动或被遮住，立即检查三点：父容器是否设置了 transform/scale/filter；是否漏写了 shade: false；DOM 是否在 layer.open 前已挂载。
特别注意：【transform 属性会让 fixed 定位失效】，一旦外层包裹 div 有 transform: scale(1)，弹窗就会相对于该 div 定位而非视口，导致位置漂移甚至消失。
验证方式：打开浏览器开发者工具，选中弹窗最外层 .layui-layer 元素，查看 computed 样式中的 position 是否为 fixed、top/right 是否为具体像素值。如果不是，说明被父级 CSS 破坏了定位上下文。
消息内容动态渲染
若消息体含变量（如用户名、订单号），不要拼接字符串，改用 DOM 操作注入。
先设 content 为占位容器：content: '<div id="msg-content"></div>'
在 success 回调中填充真实数据：success: function(layero){ $('#msg-content').html(`<p>${userName}，您的订单 <strong>${orderNo}</strong> 已提交成功</p>`); }
这一步操作起来很简单，直接把变量插进 innerHTML 就行，但能避免 XSS 风险和引号嵌套混乱。
