fixed定位适合右下角通知弹窗，因其脱离文档流、始终相对于视口定位且不随滚动偏移；需用javascript动态计算top值实现多条堆叠，配合固定高度、幂等重算和独立动画控制确保稳定。
fixed定位为什么适合右下角通知弹窗
因为 position: fixed 脱离文档流，始终相对于视口定位，不随滚动偏移——这正是右下角通知需要的“钉在屏幕角落”效果。相对定位（relative）或绝对定位（absolute）会受父容器或滚动影响，容易错位。
关键点：bottom: 16px + right: 16px 是基础锚点；但仅这样无法支持多条通知堆叠，必须配合动态计算 top 值。
用 JavaScript 管理通知队列并动态设置 top
每新增一条通知，需知道它上面已有几条、每条高度多少，才能算出自己的 top 偏移。不能靠 CSS 自动堆叠（flex-column 或 grid 在 fixed 容器里无法自然反向堆叠到右下角）。
- 维护一个全局数组（如
notificationQueue），push 新通知对象时记录其 DOM 元素和预估高度（建议固定高度，如48px，避免因内容重排导致 top 计算失准） - 遍历队列，对当前通知索引
i，设element.style.top = `calc(16px + ${i * 48}px)`（假设每条高 48px，间距 16px） - 移除通知时，从队列中 splice 掉对应项，并重新计算后续所有元素的
top
避免 fixed 元素遮挡页面操作或滚动条
右下角 fixed 弹窗若 z-index 过高，可能盖住悬浮按钮、底部导航或 macOS 滚动条；过低又会被其他 fixed 元素（如广告、客服浮窗）压住。
- 推荐 z-index 设为
9999—— 够高，但避开某些 UI 库默认的2147483647（防极端覆盖） - 给容器加
pointer-events: none，内部子元素（如关闭按钮、链接）再单独设pointer-events: auto，避免误触穿透 - 在 body 上临时加
padding-bottom: 80px（通知最大高度+间距）不是好办法——fixed 不占布局空间，加 padding 会导致页面“上推”，用户感知异常
动画入场与销毁时的视觉连贯性
单纯用 opacity 和 transform: translateY 做淡入上滑，容易在队列更新时出现位置跳变：新通知插入后，旧通知的 top 突然变化，动画中断。
解决方法是让每条通知独立控制自己的动画状态：
- 添加通知时，先设
opacity: 0+transform: translateY(20px)，再用setTimeout或requestAnimationFrame批量触发opacity: 1和transform: translateY(0) - 销毁前，先加类名触发退出动画（如
notification--exiting），动画结束后再从 DOM 移除，防止队列重算时 DOM 已消失导致索引错乱 - CSS 中用
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.4, 1)，比简单ease更自然
队列管理本身不复杂，难的是在频繁增删、滚动、缩放、暗色模式切换下保持位置稳定和动画不卡顿——高度最好写死，top 计算逻辑务必幂等，每次重算都基于当前存活节点完整遍历。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
