无法直接用 layer.msg() 实现顶部固定通知，因其强制遮罩、不支持 fixed 定位、动画受限且忽略自定义 offset；需改用 layer.open() 配合 css fixed 定位与自定义动画实现。
直接用 layer.msg() 无法实现顶部固定 + 自带动画的通知条，它默认居中、带遮罩、3秒自动关闭且不支持自定义位置。要做出右上角/顶部横幅式通知，得绕开快捷方法，用 layer.open() 手动构造，并控制 dom 插入时机和 css 动画。
为什么不能直接用 layer.msg() 放顶部
layer.msg() 是封装好的轻量提示，内部固定了 offset: 't' 的逻辑但会强制加遮罩、禁用拖拽、忽略 area 宽度控制，而且动画只支持淡入淡出（anim: 0），没法做滑入或弹性入场。更重要的是：它不支持 fixed 定位，一旦页面滚动，提示就跟着跑。
用 layer.open() 构造顶部通知条的关键配置
核心是把弹层类型设为 type: 1（页面层），禁用所有干扰项，再通过 CSS 强制 fixed 定位：
-
shade: false—— 关闭遮罩，否则会盖住整个页面 -
closeBtn: 0—— 隐藏右上角关闭按钮，避免用户误点 -
move: false—— 禁用拖拽，防止破坏定位 -
resize: false—— 禁止缩放，保持宽度稳定 -
offset: ['20px', 'auto']—— 垂直偏移 20px，水平由 CSS 控制居右 -
area: ['320px', '56px']—— 固定宽高，避免内容撑开变形 -
skin: 'layui-layer-notice'—— 自定义 class，用于写独立样式
手动添加滑入动画与 CSS 定位
layui 默认的 anim 对 type: 1 层支持有限，顶部通知需要的是从上往下滑入 + 微微缩放，必须自己加：
top.layer.open({
type: 1,
content: '<div class="notice-content">订单已提交成功</div>',
area: ['320px', '56px'],
offset: ['20px', 'auto'],
shade: false,
closeBtn: 0,
move: false,
resize: false,
skin: 'layui-layer-notice',
success: function(layero, index) {
// 确保 DOM 已插入、渲染完成后再加动画类
layero.addClass('notice-slide-in');
}
});
对应 CSS（需提前引入或写在 style 标签里）：
.layui-layer-notice {
position: fixed !important;
top: 20px !important;
right: 20px !important;
left: auto !important;
margin: 0 !important;
z-index: 999999;
}
.notice-slide-in {
animation: noticeSlideIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes noticeSlideIn {
from { transform: translateY(-20px) scale(0.95); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
注意：success 回调里加 class 是关键，太早（比如 open 前）DOM 还没生成，太晚（比如用 setTimeout）可能错过首帧渲染，动画会卡顿或失效。
多个通知如何堆叠不重叠
纯靠 CSS top 不行，每次新通知都会覆盖旧的。真实做法是用 JS 动态计算 top 值：
- 维护一个全局计数器，记录当前已打开的通知数量
- 每个新通知的
offset改成数组形式：offset: [20 + count * 60 + 'px', 'auto'] - 关闭时递减计数器，并手动调整后续通知的
top值（用layero.css('top', ...)） - 或者更稳妥：所有通知统一用 flex 容器包裹，用
flex-direction: column-reverse控制堆叠顺序，再用 JS 插入到固定容器内（如<div id="notice-container"></div>），这样完全脱离 layer 的 offset 机制
最后提醒一句：top.layer.open() 在 iframe 场景下才真正必要；如果只是单页应用，用普通 layer.open() 即可，但务必确认页面根元素没有 transform 或 perspective，否则 fixed 定位会失效——这是最常被忽略的兼容性坑。
