Tailwind CSS - 上 / 右 / 下 / 左

Tailwind CSS - Top / Right / Bottom / Left（上下左右定位）

top、right、bottom、left 和 inset 工具类用于在已定位的父元素内精确放置元素。这些工具类对于创建覆盖层、自定义布局以及用徽章或图标装饰元素至关重要。

前提条件：position 属性

关键点：这些工具类无效，除非你应用它们的元素具有设置为 absolute、relative、fixed 或 sticky 的 position 属性。定位是相对于具有自己 position 属性设置（除了 static）的最近祖先元素。

理解定位工具类

与其列出所有项，不如理解其模式。* 占位符对应于你 theme.spacing 配置中的一个键或一个任意值。

类名模式	描述
top-* / right-* / bottom-* / left-*	控制单一方向（例如 top-0、left-4）。
inset-*	控制所有四个方向的简写（例如 inset-0 等同于 top-0 right-0 bottom-0 left-0）。
inset-x-* / inset-y-*	分别用于水平方向（left、right）和垂直方向（top、bottom）的简写。
start-* / end-*	逻辑属性，根据文本方向（从左到右/从右到左）映射到 left/right，非常适合国际化。
负值（-top-4）	以破折号作前缀来使用负值，将元素拉出其父元素的边界之外。
任意值（top-[15px]）	对任何自定义值使用方括号。

实用示例

示例 1：创建通知徽章

这种常见的 UI 模式将一个小通知点放置在图标或按钮的角落。我们使用一个 relative 父元素和一个 absolute 子元素，并通过 top-0 和 right-0 进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notification Badge</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <!-- 父元素需要设置为 'relative' 以充当定位上下文 -->
  <button class="relative bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
    <!-- 铃铛图标 (SVG) -->
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>

    <!-- 绝对定位的徽章 -->
    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full bg-red-500 ring-2 ring-white"></span>
  </button>

</body>
</html>

示例 2：使用 inset 和 translate 居中元素

经典的居中技术。通过将元素设置为 absolute 并使用 inset-0，它会尝试填充其父元素。然后，我们可以在父元素上使用 flex 和 items-center/justify-center，或者在子元素本身上使用 translate 工具类来完美居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centering with Inset</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 p-8">

  <h2 class="text-2xl font-bold mb-4">Modal Overlay Example</h2>

  <!-- 父元素定义了居中元素的边界 -->
  <div class="relative h-96 w-full bg-white rounded-lg shadow-lg">
    <!-- 这个元素现在已经完美居中 -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white p-8 rounded-lg">
      <p class="font-bold">I am perfectly centered!</p>
    </div>
  </div>

</body>
</html>

最佳实践与调试

• 忘记 relative 了吗？ 最常见的错误是忘记为父容器添加 relative。如果你省略这一点，你的 absolute 元素将相对于 <body> 或下一个已定位的祖先元素进行定位。
• 全屏覆盖层：要创建全屏模态框或覆盖层，请在你的覆盖 div 上使用 fixed inset-0。这会将其相对于视口定位，使其覆盖整个屏幕。
• 用于国际化（i18n）的逻辑属性：在构建需要支持从右到左（RTL）语言的应用程序时，优先使用 start-* 和 end-* 而非 left-* 和 right-*，以确保你的布局自动正确翻转。
• 使用 z-index 进行堆叠：当元素重叠时，使用 z-index 工具类（例如 z-10、z-20）来控制哪个元素显示在顶部。