daisyUI Toast 组件完全指南：角落堆叠通知条的定位、配色与动画实现

Toast 是 daisyUI 中用于在页面角落堆叠展示通知消息的容器组件，它通过一个 toast 基础类加若干"定位修饰类"的组合，即可把一条或多条 alert 提示固定在页面左上、顶部居中、右下等任意九个方位。本文将以 官方 Toast 文档/components/toast/+page.md) 为骨架，结合 toast.css 源码 与仓库内的交互式演示页面，完整讲解全部定位类、默认行为、响应式与动效实现，并给出可直接复制运行的 HTML 示例，让你读完即可在自己的 Tailwind + daisyUI 项目中落地使用。

Toast 是什么

根据文档元数据（frontmatter）中的定义：Toast 是一个用于"堆叠元素"（wrapper to stack elements）的容器，默认被固定在页面（viewport）的角落。它本身不承载具体内容，而是与 Alert 组件 等搭配使用——最常见的场景是把一条或多条 alert 作为 toast 的子元素，形成"来新消息了""发送成功"等轻量级通知。

它的核心优势在于零 JavaScript：纯 CSS 实现定位与动画，你只需要在 HTML 上拼好类名，通知条的显示/隐藏逻辑可以交给自己的业务脚本控制。

全部类名一览

文档 frontmatter 中声明了 toast 组件完整的类名体系，分为"组件类"与"定位类"两组：

类别	类名	作用
组件	toast	容器元素，固定（fixed）在页面角落，负责堆叠子元素
水平定位	toast-start	水平靠左（start）
水平定位	toast-center	水平居中
水平定位	toast-end	水平靠右（end），默认值
垂直定位	toast-top	垂直靠顶
垂直定位	toast-middle	垂直居中
垂直定位	toast-bottom	垂直靠底，默认值

默认组合为 toast-end + toast-bottom，即右下角；水平与垂直定位类可自由组合，共形成 9 个位置。文档同时提供了一份浓缩速查（位于 skills/daisyui/components/toast.md）：组件类为 toast，定位修饰类为 toast-start、toast-center、toast-end、toast-top、toast-middle、toast-bottom，通用语法为 <div class="toast {MODIFIER}">{CONTENT}</div>，其中 {MODIFIER} 可选，取任一（或多个）定位类名。

源码级解读：.toast 容器如何工作

在 packages/daisyui/src/components/toast.css 中，.toast 的核心样式如下：

.toast {
  @layer daisyui.l1.l2.l3 {
    @apply fixed start-auto end-4 top-auto bottom-4 flex flex-col gap-2 bg-transparent;
    translate: var(--toast-x, 0) var(--toast-y, 0);
    width: max-content;
    max-width: calc(100vw - 2rem);
    ...
  }
}

逐行拆解其实现原理：

• @apply fixed：position: fixed，使容器相对视口固定，因此无论页面滚动到哪里，通知条都停留在角落；
• start-auto end-4 top-auto bottom-4：使用 CSS 逻辑属性（inset-inline-start/end 与 top/bottom）设置默认位置——右侧偏移 1rem（end-4）、底部偏移 1rem（bottom-4），start-auto/top-auto 表示左、上方向不设约束，这正是"右下角默认位"的来源；
• flex flex-col gap-2：弹性列布局，多条 alert 垂直堆叠，间距 0.5rem；
• translate: var(--toast-x, 0) var(--toast-y, 0)：居中定位的关键。水平/垂直定位类通过覆盖 --toast-x、--toast-y 两个 CSS 变量来微调容器的位移量，实现真正的"视觉居中"（详见下文）；
• width: max-content：宽度由内容决定，避免拉伸占满整行；
• max-width: calc(100vw - 2rem)：限制最大宽度为视口宽度减 2rem，保证在小屏幕上通知条不会溢出屏幕边缘；
• & > * 子元素动画：在 prefers-reduced-motion: no-preference（用户未开启"减少动态效果"）时，每个直接子元素入场执行 toast 0.25s ease-out 动画。

关于 @layer daisyui.l1.l2.l3 这类嵌套层级：daisyUI 在构建阶段会把组件 CSS 放入自己的级联层中，nestCssLayers.js 会将形如 @layer daisyui.l1.l2 的嵌套声明拍平，保证组件样式层的优先级可控、且能被使用者用普通 CSS 覆盖。

六种定位修饰类的实现细节

定位类都放在 @layer daisyui.l1.l2（比基础容器低一层），以确保它们能正确覆盖默认位置：

类名	核心 CSS	效果
.toast-start	start-4 end-auto; --toast-x: 0	左侧偏移 1rem，水平位移归零
.toast-center	start-1/2 end-1/2; --toast-x: -50%	左右各占 50%，再向左平移自身宽度的一半，实现水平居中
.toast-end	start-auto end-4; --toast-x: 0	恢复右侧偏移 1rem（默认）
.toast-top	top-4 bottom-auto; --toast-y: 0	顶部偏移 1rem
.toast-middle	top-1/2 bottom-auto; --toast-y: -50%	顶部置于 50% 处，再向上平移自身高度的一半，实现垂直居中
.toast-bottom	top-auto bottom-4; --toast-y: 0	恢复底部偏移 1rem（默认）

注意 .toast-center 与 .toast-middle 的 translate 技巧：把 start-1/2 / top-1/2 与 translate: -50% 结合，使容器自身宽度/高度的一半被反向补偿，从而获得真正精确的居中——而不是简单地把 left/top 设为 50%。你可以在构建产物 packages/bundle/daisyui.js（第 488 行附近）中看到与源码一一对应的最终 CSS 规则。

入场动画：toast keyframes

toast.css 底部定义了入场动画：

@keyframes toast {
  0% {
    scale: 0.9;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}

动画从 scale(0.9) 且完全透明开始，过渡到原始大小与完全不透明，时长 0.25s、缓动 ease-out。该动画只作用于 toast 的直接子元素（& > *），且仅在用户未开启系统"减少动态效果"（prefers-reduced-motion: no-preference）时播放，兼顾了可访问性。

九宫格定位：完整示例与可复制代码

以下示例全部来自官方文档，并可在仓库的 playground 演示页（第 2304 行起）中实际渲染验证。文档示例在外层套了一个 w-full h-64 relative 容器 + absolute 类，仅用于在文档预览区内展示定位效果；在实际页面中使用时，不需要这些包裹层，.toast 的 fixed 定位会直接相对视口生效。

基础用法：toast 内放一条 alert（默认右下角）

<div class="toast">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

顶部三方位

<!-- 左上 -->
<div class="toast toast-top toast-start">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

<!-- 顶部居中 -->
<div class="toast toast-top toast-center">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

<!-- 右上 -->
<div class="toast toast-top toast-end">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

中部三方位

<!-- 左中 -->
<div class="toast toast-start toast-middle">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

<!-- 正中 -->
<div class="toast toast-center toast-middle">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

<!-- 右中 -->
<div class="toast toast-end toast-middle">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

底部三方位（bottom 为默认值，可省略）

<!-- 左下 -->
<div class="toast toast-start">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

<!-- 底部居中 -->
<div class="toast toast-center">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

<!-- 右下（完全默认） -->
<div class="toast toast-end">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

可以看到，多个 alert 作为兄弟节点放入同一个 .toast 容器后，会借助 flex flex-col gap-2 自动垂直堆叠成通知队列。

与 Alert 搭配：消息的语义化配色

文档所有示例的子元素都是 alert alert-info / alert alert-success。在 alert.css 中，alert-info 通过 --alert-color: var(--color-info) 与 --alert-border-color: var(--color-info) 把背景、边框统一到主题的 info 色板，alert-success 同理使用 success 色板。也就是说，toast 的配色完全由内部 alert 决定，而 alert 颜色又跟随当前 daisyUI 主题变量（如 light/dark 等主题）自动切换——你无需为 toast 本身写任何颜色样式。同样的做法可推广到 alert-warning、alert-error、alert-soft 等修饰类，实现不同严重级别的通知。

常见问题与最佳实践

• 为什么示例里有 relative 容器和 absolute 类？ 这是文档预览组件（Component.svelte）为了把效果框定在预览区内展示；实际业务中直接用 .toast 即可，它会 fixed 到视口角落，不参与文档流。
• 默认位置是哪？ 不写任何定位类时为右下角（toast-end + toast-bottom 为默认值）。
• 如何让多条消息排队？ 把多条 alert 放进同一个 .toast 容器，垂直方向自动堆叠、间距 0.5rem。
• 如何控制显示/隐藏？ 纯 CSS 组件不提供显隐 API，通常做法是：业务脚本按需渲染/移除 .toast 节点，或为容器/子元素切换 hidden 等类；入场动画在子元素出现时自动播放。
• 可访问性：动画仅在系统未开启"减少动态效果"时播放；建议为通知内容配合 role="status" / aria-live 等 ARIA 属性以照顾屏幕阅读器用户。
• 想快速体验全部 9 个方位？ 仓库的 packages/playground 内置了全部 toast 变体的可交互演示，可在本地运行 playground 查看真实效果。