Toast必须用position-fixed准确定位，需显式声明position-fixed并配合top-0/bottom-0等工具类定位，外层容器须设aria-live="polite"和position-fixed，动态插入须先挂载DOM再初始化实例。
Toast必须用position-fixed才能准确定位
bootstrap 5 的 .toast 默认脱离文档流，但光加 fixed-bottom 或 fixed-top 不够——这些类只是 position-fixed 的封装别名，不带具体偏移值，实际渲染时会紧贴视口边缘，文字常被截断、关闭按钮点不中。
正确做法是显式声明 position-fixed，再组合工具类控制对齐：
-
top-0/bottom-0/start-0/end-0决定哪条边贴住视口 - 用
p-3或内联style="right: 1rem; bottom: 1rem;"微调间距，避免被 footer 遮挡或太靠近屏幕边 - 右下角堆叠多个 Toast 时，
z-index不能靠 JS 动态改——得靠外层容器结构 + CSS 规则来管理层级
多 Toast 堆叠必须用带 aria-live 的外层容器包裹
如果把多个 .toast 直接平铺在 DOM 里，不加统一父容器，它们的 z-index 默认相同，浏览器按 DOM 顺序渲染，后弹的反而在底层，点击关闭按钮可能失灵。
必须用一个外层容器包裹所有 toast，并设关键属性：
-
aria-live="polite"和aria-atomic="true"是可访问性必需，也影响渲染逻辑 - 容器自身要带
position-fixed+ 定位类（如bottom-0 end-0），它是所有 toast 的定位基准 - 不要把 toast 塞进
.container或.row里——它们会破坏脱离文档流的效果
动态插入 Toast 必须先挂载 DOM 再初始化实例
用 AJAX 或 JS 动态生成 toast 后直接 new bootstrap.Toast(el)，大概率失败：元素还没进 DOM，querySelector 找不到，实例化无声失败，控制台也不报错。
正确顺序：
- 先
parentElement.appendChild(toastEl)插入到页面中 - 再用
document.querySelector('.toast')（或更精确的选择器）拿到刚插入的元素 - 最后
new bootstrap.Toast(toastEl).show() - 避免在循环里反复
new却不dispose()——频繁弹出时有内存泄漏风险
BootstrapBlazor 中改位置用 Placement 枚举而非 CSS 类
如果你用的是 BootstrapBlazor（不是原生 Bootstrap），Toast 位置由 Placement 枚举控制，和 CSS 工具类无关。常见底部选项：
-
Placement.Bottom：底部居中 -
Placement.BottomStart：底部左侧 -
Placement.BottomEnd：底部右侧
全局设置：options.ToastPlacement = Placement.BottomEnd；单个 toast 设置：Placement = Placement.BottomCenter。写错成 bottom-0 这类类名不会生效。
真正容易被忽略的是：外层容器的 aria-live 属性和 position-fixed 必须同时存在，缺一不可；动态插入时 DOM 挂载和实例化的时间差，比想象中更敏感。
