移动端toast用position: fixed居中更可靠，因其直接相对于视口定位，不受父级transform、overflow: hidden或滚动容器影响；left: 50% + transform: translatex(-50%)实现水平居中，top/bottom配合控制垂直位置，多实例需js动态计算高度避免重叠。
为什么移动端 Toast 用 position: fixed 居中比 absolute 更可靠
因为 fixed 直接相对于视口定位，不受父级 transform、overflow: hidden 或滚动容器影响——而移动端页面里带 transform 的轮播、下拉刷新、Modal 封装层太常见了，absolute 很容易突然消失或错位。relative 更不行，一滚动就跟着跑。
left: 50% + transform: translateX(-50%) 是最稳的水平居中写法
不用算宽度、不依赖 margin: auto（它在 fixed 下对水平居中无效），也不靠 text-align: center（只对内联内容起作用）。关键点：
-
left: 50%把元素左边缘移到视口正中间 -
transform: translateX(-50%)向左平移自身宽度的一半，实现真居中 - 必须同时设
top（比如top: 24px）或bottom，否则位置不可控 - 避免用
right: 50%配transform，iOS Safari 旧版有渲染偏差
垂直方向选 top 还是 bottom？取决于交互意图
顶部居中（top: 24px）适合操作反馈类提示（如“保存成功”），用户视线自然落在页面上半区；底部居中（bottom: 24px）更适配手指操作区域，尤其表单提交后轻提示。注意：
- 不要写
top: 0; bottom: 0; margin: auto——fixed元素高度不固定时，这招在部分 Android WebView 里会失效 - 若需动态计算垂直偏移（比如避开虚拟键盘），必须用 JS 读取
window.innerHeight和元素getBoundingClientRect().height，CSS 无解 - 移动端加
will-change: transform能缓解缩放/手势过程中的重绘抖动
堆叠多个 Toast 时，JS 计算 top 值不能只靠计数器
所有 Toast 都设 top: 24px 会重叠——fixed 元素彼此无流式关系。正确做法是实时累加已显示 Toast 的真实高度：
- 只遍历当前可见的 Toast：
document.querySelectorAll('.toast:not(.closing)') - 用
el.getBoundingClientRect().height读渲染后高度（含 padding/border，比offsetHeight更准） - 新 Toast 的
top = 已有总高度 + 间距（如 12px），不是 “第 n 个就 top: 24px × n” - DOM 插入顺序必须和显示顺序一致，否则
querySelectorAll返回顺序错乱，导致计算偏移错误
transform、虚拟键盘弹出后的视口变化、多实例叠加时的 DOM 顺序与高度测量时机——这些没法全靠 CSS 解决，得在 JS 层把边界条件兜住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
