Toast外层容器必须加position-fixed，仅bottom-0或end-0无效；因这些工具类仅设偏移值，不提供定位上下文，需外层容器显式声明position-fixed才能使定位生效。
Toast外层容器必须加position-fixed，不能只靠bottom-0或end-0
Bootstrap 5 的bottom-0、end-0、start-0等工具类本身不带position: fixed声明，它们只是设置top/bottom/left/right值。如果父容器没设position: fixed或position: absolute，这些偏移值完全无效——浏览器按默认文档流渲染，Toast 会塌缩、文字被裁、关闭按钮点不中。
常见错误写法：<div class="toast bottom-0 end-0">...</div> —— 这里bottom-0对.toast不起作用，因为.toast默认是position: relative，而它的父容器（比如<body>）没有定位上下文。
- 正确结构必须有一个**外层容器**，且显式添加
position-fixed - 定位类（如
bottom-0、start-0、top-50）要加在这个外层容器上，不是.toast自身 - 外层容器还需带
aria-live="polite"和aria-atomic="true"，否则多 Toast 堆叠时 z-index 和 DOM 顺序会错乱
为什么给.toast直接加left-0 top-50 translate-middle-y无效？
因为.toast默认是position: relative，left-0和top-50是相对于其最近的已定位祖先计算的——如果祖先没设position: relative/absolute/fixed，就退到<body>，但<body>通常有 margin/padding/overflow，导致位置飘移或被裁剪。
更关键的是：translate-middle-y这类 transform 工具类，**只对position: fixed或position: absolute元素生效**。给position: relative的.toast加它，CSS 引擎直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 想垂直居中，必须让外层容器用
position-fixed+top-50+translate-middle-y - 想水平居中左半区，用
start-0（LTR 下即left: 0），不是left-0（Bootstrap 5 没这个类） - 不要给外层容器设
width或max-width，否则 Toast 自适应宽度会被截断
动态插入 Toast 时定位失效，是因为没等 DOM 挂载就初始化
用 JS 创建.toast元素后立刻调用new bootstrap.Toast(el)，大概率静默失败：元素还没插入 DOM，querySelector找不到它，控制台也不报错，Toast 就是白屏。
正确顺序必须是三步：
- 先用
parentElement.appendChild(toastEl)把 Toast 插入外层容器（比如document.querySelector('.toast-container')） - 再用
document.querySelector('.toast')或更精确的选择器拿到刚插入的节点 - 最后调用
new bootstrap.Toast(toastEl).show()
漏掉第一步，所有定位类都白搭——DOM 都不存在，CSS 根本没机会参与渲染。
多个 Toast 堆叠错位，本质是 z-index 和 bottom 计算失控
Bootstrap 不管理多个 Toast 的堆叠逻辑。把多个.toast平铺在同一个position-fixed容器里，它们默认共享相同z-index，后插入的反而压在底层（因为 DOM 顺序靠后但渲染层级没提升），关闭按钮点不中。
真正起效的方案是：统一用一个外层容器包裹所有 Toast，并手动控制每个 Toast 的bottom偏移和z-index递增。
- 外层容器必须带
aria-live="polite"和aria-atomic="true"，这是堆叠顺序的隐式依据 - 每个 Toast 元素需动态加
style="bottom: Xpx; z-index: Y;"，X 递减（比如 1rem, 3.5rem, 6rem），Y 递增（比如 1050, 1051, 1052） - 避免用
margin-bottom模拟错开——它不影响position-fixed元素的布局流，纯属误导
最易被忽略的一点：所有定位类和 JS 初始化必须严格匹配 DOM 结构层级。一旦把 Toast 嵌套进.container、.row或任何overflow: hidden的祖先里，视觉上就会被裁剪，调试时却很难一眼看出问题根源。
