入门 CSS Toasts Toast 位置

在 Web 开发中，Toast 是一种轻量级的提醒形式，通常用于提示用户某些状态或动作已经完成。在本文中，我们将介绍如何使用 CSS 构建一个 Toast，并控制它的位置。让我们开始吧！

实现一个简单的 Toast

首先，我们需要创建一个基本的 HTML 结构，它将包含 Toast 的内容。以下是一个示例 Toast 对应的 HTML 结构：

<div class="toast">
  <div class="toast-header">
    <strong class="mr-auto">Title</strong>
    <small>Subtitle</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    This is the Toast body
  </div>
</div>

如上所示，我们使用了 Bootstrap 4 的 Toast 布局结构。.toast 表示一个 Toast，.toast-header 是一个头部容器，其中包含标题、副标题和关闭按钮，.toast-body 则是 Toast 的主体内容。注意，我们在关闭按钮上添加了 data-dismiss="toast" 属性，以便单击按钮时关闭 Toast。

接下来，在 CSS 中为 .toast 添加样式。以下是一个实现了简单样式的示例：

.toast {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 15px;
  z-index: 1;
}

.toast.show {
  display: block;
}

我们将 .toast 的 display 属性设置为 none，以便默认情况下它们不会显示。我们的目标是将 Toast 放置在屏幕的右下角，因此我们将其 position 属性设置为 fixed，并将 bottom 和 right 属性设置为 0，以便与屏幕底部和右侧对齐。我们使用 margin 属性来添加距离，并将 z-index 属性设置为 1，以确保 Toast 可见。

最后，我们使用 .toast.show 类来显示 Toast。该类将 .toast 的 display 属性设置为 block，以显示 Toast。

我们现在已经为 Toast 的结构和样式打下了基础。通过在 JavaScript 中为 Toast 元素添加和删除 .show 类，我们可以在需要时显示和隐藏 Toast。

控制 Toast 的位置

有时，我们需要将 Toast 放置在不同于默认位置的位置。使用 CSS，我们可以轻松地更改 Toast 的位置。以下是几种可以控制 Toast 位置的 CSS 技巧：

将 Toast 放置在屏幕上方

首先，让我们尝试将 Toast 放置在屏幕上方。要将 Toast 放置在屏幕上方，请将 .toast 的 bottom 属性设置为 auto，将 top 属性设置为 0：

.toast {
  /* ... 其他属性 ... */
  bottom: auto;
  top: 0;
}

现在，我们的 Toast 将放置在屏幕顶部。

在屏幕中央放置 Toast

要将 Toast 放置在屏幕中央，请将 .toast 的 bottom 和 right 属性设置为 auto，同时将 top 和 left 属性设置为 50%：

.toast {
  /* ... 其他属性 ... */
  bottom: auto;
  right: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

现在，我们的 Toast 将在屏幕中央水平和垂直居中。

在屏幕底部中央放置 Toast

要将 Toast 放置在屏幕底部中央，请将 .toast 的 right 属性设置为 auto，同时将 bottom 和 left 属性设置为 0 和 50%：

.toast {
  /* ... 其他属性 ... */
  right: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

现在，我们的 Toast 将在屏幕底部水平居中。

总结

在本文中，我们介绍了如何使用 CSS 和 HTML 构建一个简单的 Toast，并控制位置。我们学习了如何将 Toast 放置在屏幕顶部、中央和底部，以及如何在左、中、右三个位置之间自由移动 Toast。通过这些技巧，您可以完全控制 Toast 并根据需要将其放置在不同的位置。