layui layer.open() 的 offset 参数支持 'lt'、'rt'、'lb'、'rb' 快捷值实现四角弹出，比手动数组更鲁棒；需配 shade: false、closeBtn: 0、time: 3000 实现非阻塞提示；多弹窗时应使用 layer.setTop() 而非直接设 zIndex。
直接用 layer.open() 的 offset 参数就能实现四个角落弹出，无需额外 dom 操作或 css 定位 hack。
用 offset 快捷值定位到四角
layui 内置了简洁的字符串快捷值，比手动算坐标更可靠，也避免因窗口缩放、滚动条出现导致偏移错位：
-
offset: 't'：顶部居中（不是左上角）——若要左上角，得用数组offset: ['0', '0'] -
offset: 'lt'：左上角 —— 实际效果是紧贴视口左上边缘 -
offset: 'rt'：右上角 -
offset: 'lb'：左下角 -
offset: 'rb'：右下角
注意：lt/rt/lb/rb 是 layui 2.8+ 支持的标准快捷值，旧版（如 2.5.x）可能不识别，会回退为居中；建议确认你用的是 layer 官网最新版 或至少 2.8+。
为什么不能只靠 area 和 offset 数组？
手动写 offset: ['20px', '20px'] 看似灵活，但容易踩坑：
- 如果页面有横向滚动条，
left: 20px会相对于 document 左侧而非视口，导致右移错位 - 移动端 viewport 缩放后，固定像素值会失准
-
lt类快捷值内部做了getBoundingClientRect()+window.scrollX/Y补偿，更鲁棒
所以除非你要精确控制距离边缘 8px 这种设计稿像素级需求，否则优先用快捷字符串。
弹出不影响操作的关键配置
角落消息框通常用于提示类场景（如 toast），需确保用户能继续操作页面：
- 设
shade: false：彻底关闭遮罩层，点击背景不会关闭弹窗也不会阻塞交互 - 设
closeBtn: 0：隐藏右上角关闭按钮，避免误点；若需手动关闭，用layer.close(index) - 设
time: 3000+end: function(){}：3 秒后自动销毁，不残留 DOM - 避免用
type: 0（信息框），它默认带遮罩且阻塞；改用type: 1（页面层）+ 纯 HTML 内容
示例代码：
layer.open({
type: 1,
content: '<div style="padding:10px;background:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.1)">✅ 保存成功</div>',
area: ['220px', 'auto'],
offset: 'rb', // 右下角
shade: false,
closeBtn: 0,
time: 3000,
end: function(){ console.log('右下角提示已销毁'); }
});
多个角落弹窗共存时的 zIndex 问题
如果你同时在左上、右下各弹一个，它们默认共享 layer 的全局 z-index 计数器，后打开的会盖住前一个 —— 这通常是期望行为。但若想强制某一个「永远在最前」，不能只靠 zIndex 参数赋值，因为 layer 内部会叠加计算。
- 正确做法：调用
layer.setTop(layero)在success回调里执行 - 错误做法：写
zIndex: 999999，layer 会把它和内部计数器相加，反而可能导致层级混乱 - 如果只是短暂提示，不建议强行干预 z-index；真正需要多层管理的场景，应考虑用独立的
layer.msg()或封装成队列系统
角落弹窗看似简单，但 offset 值兼容性、遮罩开关逻辑、自动销毁时机这三点，最容易在线上环境突然失效。上线前务必在 iOS Safari 和 Chrome 移动设备模拟器里实测一次滚动 + 弹出的组合行为。
