toast必须用position-fixed准确定位，配合top/bottom/start/end工具类及p-3等间距控制；需外层容器包裹并设aria-live；data-bs-delay单位为毫秒；动态插入须先挂载dom再初始化实例。
Toast 必须用 position-fixed 才能准确定位
Bootstrap 5 的 .toast 默认是脱离文档流的，但**仅加 .fixed-top 或 .fixed-bottom 不够**——这些类本身不包含定位偏移，实际效果取决于是否配合 top/bottom/start/end 工具类。直接写 <div class="toast fixed-bottom">，toast 会贴在视口最底部、文字被截断、按钮点不中。
<p>正确做法是组合使用定位工具类：</p>
<ul>
<li>
<code>.position-fixed 是基础（必须显式声明，fixed-top 等只是它的封装别名，但语义弱、控制粒度粗）
.top-0 / .bottom-0 / .start-0 / .end-0 控制边缘对齐.p-3 或自定义 style="right: 1rem; bottom: 1rem;" 微调间距，避免紧贴屏幕边或被 footer 遮住右下角堆叠多个 Toast 时 z-index 和容器结构不能省
多个 toast 往同一位置塞，如果不处理层级和堆叠逻辑，后弹的会被先弹的盖住，或者点击关闭按钮失灵。关键不是靠 JS 动态改 z-index，而是靠容器结构 + CSS 规则。
必须用一个带 aria-live="polite" 的外层容器包裹所有 toast，例如：
<div aria-live="polite" aria-atomic="true" class="position-fixed bottom-0 end-0 p-3"> <div class="toast">...</div> <div class="toast">...</div> </div>
这个外层容器决定了所有 toast 的定位基准和初始 z-index。如果没它，每个 toast 各自为政，z-index 值可能相同，浏览器按 DOM 顺序渲染，后插入的反而在底层。
data-bs-autohide 和 data-bs-delay 配合定位类才有意义
定位类只管“在哪”，但 toast 是否自动消失、延迟多久，全靠这两个属性驱动。常见错误是设了 data-bs-delay="3"，结果 toast 一闪就没了——因为单位是毫秒，不是秒。
-
data-bs-delay="3000"：3 秒后自动隐藏（推荐值） -
data-bs-autohide="false"：禁用自动关闭，此时必须手动调用toast.hide()，否则它会一直挂着挡住操作区域 - 如果 toast 定位在
bottom-0 end-0，又设了autohide="true"但delay太小，用户根本来不及看清内容就消失了
动态插入 Toast 时，初始化时机比定位类更重要
很多同学把 toast HTML 字符串拼好后 innerHTML += ...，然后直接 new bootstrap.Toast(el).show()，结果报错 Cannot read property 'show' of null 或 toast 不动。问题不在定位类，而在 DOM 节点还没真正挂载完成。
安全做法是：
- 先用
document.createElement('div')创建节点 - 用
container.appendChild(newToast)插入目标容器（比如上面说的.toast-container） -
再执行
new bootstrap.Toast(newToast).show() - 不要复用同一个
bootstrap.Toast实例多次调用show()，每次都要 new 新实例
定位类写得再准，节点没进 DOM 树，JS 就找不到它；而一旦进树又没及时初始化，show() 就只是个静默失败。
