toast必须用position: fixed，因其需脱离文档流并始终相对于视口定位（如右下角）；absolute受父元素transform/overflow影响易消失或偏移，relative则随滚动移动而失去悬浮感。
为什么 toast 必须用 position: fixed 而不是 absolute
因为要脱离文档流、始终相对于视口定位（比如右下角）。absolute 会受父元素的 transform 或 overflow: hidden 影响，常见表现是 toast 突然消失、位置偏移；relative 则随滚动条一起动，完全失去“悬浮”感。
实操要点：
-
fixed必须配合明确的top/right值，不能只写position: fixed就指望它自动居右下 - 务必设
z-index: 1000或更高，否则容易被 Modal、Header、Sidebar 遮住 - 移动端加
will-change: transform可缓解 viewport 缩放时的抖动
用 top 动态堆叠多个 toast 时 JS 怎么算才不跳
所有 toast 都设 top: 20px 就会全挤在一条线上——fixed 元素彼此无感知，浏览器不会自动避让。真要堆叠，得靠 JS 实时读 DOM 高度累加，而不是靠 CSS 动画或计数器。
关键细节：
- 只查当前显示中的 toast：
document.querySelectorAll('.toast:not(.closing)')，排除正在fade-out的节点 - 用
getBoundingClientRect().height读真实渲染高，避免padding/margin/border导致计算偏差 - 新 toast 的
top= 所有已存在 toast 高度之和 + 间距（如12px），不要重算全部，只算自己该在哪 - DOM 节点必须按显示顺序追加到
body末尾，否则querySelectorAll会漏掉或顺序错乱
@keyframes 滑入动画为什么不能用 transition 替代
因为 transition 只响应属性变化，而“从屏幕外滑入”需要一个明确的初始状态（比如 transform: translateY(-100%)），但元素一渲染就处于 translateY(0)，transition 根本没机会触发“屏外→屏内”的过程。
正确做法：
- 用
@keyframes定义完整路径：0% { transform: translateY(-100%); opacity: 0; }→100% { transform: translateY(0); opacity: 1; } - 动画触发靠 JS 添加类，比如
toastEl.classList.add('show')，再由 CSS 控制animation: slideIn 0.3s ease-out forwards - 别在
show类里写transition，那只是补位逻辑，不是主动画
移动端 fixed toast 出现错位或抖动怎么办
本质是 Safari/Android WebView 对 fixed 定位在缩放、软键盘弹出、页面滚动时行为不稳定，尤其在 transform 父容器里更明显。
能落地的对策：
- 避免把 toast 挂在带
transform的祖先元素下，直接 append 到document.body - 监听
scroll和resize，用requestAnimationFrame节流更新top/right，别用setTimeout防抖 - 软键盘弹出时，
visualViewport可能比window.innerHeight更准，但兼容性有限，建议 fallback 到监听focusin事件临时隐藏 toast -
will-change: transform加在 toast 元素上，不是父容器，且仅在动画期间加，动画结束立即移除
真正难的不是写出第一个 toast，而是当它出现在复杂布局、多层嵌套、频繁滚动、软键盘切换的场景里，还能稳住位置、不闪不跳、不遮不住、不卡顿——这些细节藏在 DOM 顺序、坐标计算时机、动画触发方式里，而不是某一行 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
