直接用.alert无法实现右下角浮动，因其默认为文档流内块级元素，需脱离文档流并用固定定位容器包裹、动态堆叠，同时覆盖width、padding、.close定位等样式并手动初始化关闭行为。
为什么直接用 .alert 无法实现右下角浮动？
Bootstrap 4 的 .alert 默认是文档流内块级元素，依赖父容器宽度、会触发重排、没有定位上下文。想让它“浮”在右下角，必须脱离文档流并建立固定定位锚点——但不能简单加 position: fixed，否则会丢失响应式间距、遮挡滚动内容、且多条通知会堆叠覆盖。
关键判断：这不是样式微调，而是要重构渲染逻辑：用一个固定定位容器包裹动态插入的 .alert，每条通知独立定位 + 自上而下堆叠，同时保留 Bootstrap 4 的颜色类（.alert-success 等）和关闭功能。
如何用纯 CSS + 少量 JS 实现可叠加的右下角通知条
- 创建一个全局限定的
div 容器，固定在视口右下角，留出边距：<div id="toast-container" style="position: fixed; bottom: 1rem; right: 1rem; z-index: 1050;"></div>
- 每条通知用
.alert.alert-dismissible 构建，但移除默认 margin-bottom，改用 margin-top 控制堆叠间距
- 用
transform: translateY() 配合 JS 动态计算偏移量，避免用 top 导致布局抖动
- 关闭按钮需绑定
data-dismiss="alert" 并手动触发 remove()，否则 Bootstrap 4 的销毁逻辑不生效
div 容器，固定在视口右下角，留出边距：<div id="toast-container" style="position: fixed; bottom: 1rem; right: 1rem; z-index: 1050;"></div>
.alert.alert-dismissible 构建，但移除默认 margin-bottom，改用 margin-top 控制堆叠间距transform: translateY() 配合 JS 动态计算偏移量，避免用 top 导致布局抖动data-dismiss="alert" 并手动触发 remove()，否则 Bootstrap 4 的销毁逻辑不生效示例单条通知 HTML（插入到 #toast-container 内）：
<div class="alert alert-info alert-dismissible fade show" role="alert"> 操作成功！ <button type="button" class="close" data-dismiss="alert">×</button> </div>
必须覆盖的 Bootstrap 4 默认样式有哪些？
-
.alert 的 width: 100% → 改为 width: 320px; max-width: 90vw;（兼顾小屏）
-
.alert 的 margin-bottom: 0 已设，但需补 margin-top: 0.5rem（首条除外）
-
.alert-dismissible .close 的 position: relative → 改为 position: absolute; right: 0.75rem; top: 0.5rem;
-
.alert.show 的 opacity: 0 过渡需重置：加 transition: opacity 0.15s linear, transform 0.2s ease-out;
- 移除
.alert 的 padding-left/right（因 .close 已绝对定位），统一用 padding: 0.75rem 1.25rem 0.75rem 0.75rem;
.alert 的 width: 100% → 改为 width: 320px; max-width: 90vw;（兼顾小屏）.alert 的 margin-bottom: 0 已设，但需补 margin-top: 0.5rem（首条除外）.alert-dismissible .close 的 position: relative → 改为 position: absolute; right: 0.75rem; top: 0.5rem;
.alert.show 的 opacity: 0 过渡需重置：加 transition: opacity 0.15s linear, transform 0.2s ease-out;
.alert 的 padding-left/right（因 .close 已绝对定位），统一用 padding: 0.75rem 1.25rem 0.75rem 0.75rem;
这些覆盖必须放在 Bootstrap CSS 之后，且用 !important 仅限 position 和 transform 类属性，其余尽量靠选择器权重控制。
立即学习“前端免费学习笔记（深入）”；
多条通知堆叠时容易踩的坑
- 不要用
bottom 计算位置：每新增一条，所有已有通知的 bottom 值都要重算，性能差且易错
- 正确做法是让容器
#toast-container 保持 bottom: 1rem，每条通知用 position: relative + margin-top 排列，最后一条自然贴底
- 如果用户快速连续触发多次通知，JS 必须防抖或合并相同类型（如连续两个
alert-success 只显示最新一条）
- iOS Safari 下
fixed 在滚动时可能闪烁，需加 will-change: transform; 到容器上
- 关闭动画结束后必须真正从 DOM 移除节点，否则
offsetHeight 检测失效，后续通知定位偏移
bottom 计算位置：每新增一条，所有已有通知的 bottom 值都要重算，性能差且易错#toast-container 保持 bottom: 1rem，每条通知用 position: relative + margin-top 排列，最后一条自然贴底alert-success 只显示最新一条）fixed 在滚动时可能闪烁，需加 will-change: transform; 到容器上offsetHeight 检测失效，后续通知定位偏移最常被忽略的是：Bootstrap 4 的 $.fn.alert.Constructor 不支持外部实例管理，所以每次插入新 .alert 后，必须手动调用 $('[data-dismiss="alert"]').alert() 初始化关闭行为——漏掉这步，×按钮就完全没反应。
