Tailwind CSS - 定位

使用 Tailwind CSS 进行元素定位

Tailwind CSS 提供工具类来控制元素的 position 属性，使你能够轻松构建复杂的布局。这些工具类直接映射到标准的 CSS position 值。

核心定位工具类

这些是设置元素定位的基本类。

类名	CSS 属性	描述
static	position: static;	默认值。元素根据正常的文档流进行定位。
relative	position: relative;	元素相对于其正常位置进行定位。关键在于，它为 absolute 定位的子元素创建了一个新的定位上下文。
absolute	position: absolute;	元素从正常流中移除，并相对于其最近的 relative、absolute、fixed 或 sticky 祖先元素进行定位。
fixed	position: fixed;	元素从正常流中移除，并相对于视口（viewport）进行定位。即使页面滚动，它也保持在同一位置。
sticky	position: sticky;	relative 和 fixed 的混合。元素随页面滚动，直到它达到指定的偏移量（例如 top-0），此时它会“粘”在该位置。

专业提示： 当使用 absolute、fixed 或 sticky 时，你还必须使用定位工具类（placement utilities）（如 top-0、left-4、inset-0 等）来指定元素的最终位置。

实际应用示例

理论固然重要，但让我们看看这些工具类如何用于构建常见的 UI 模式。

1. Relative 和 Absolute：通知徽章

一个经典的用例是在图标上放置一个通知徽章。父级容器设置为 relative 以建立定位上下文，而徽章本身设置为 absolute。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Notification Badge</title>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <button class="relative bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full">
    <!-- 铃铛图标（SVG 或字体图标） -->
    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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" /></svg>

    <!-- 绝对定位的徽章 -->
    <span class="absolute top-0 right-0 h-5 w-5 bg-red-500 rounded-full flex items-center justify-center text-xs font-bold">3</span>
  </button>
</body>
</html>

2. Fixed：网站头部

fixed 工具类非常适合创建在用户滚动时始终固定在视口顶部的头部或导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Fixed Header</title>
</head>
<body>
  <!-- 固定头部 -->
  <header class="fixed top-0 left-0 right-0 bg-white shadow-md p-4 z-10">
    <p class="text-center font-bold text-lg">My Awesome Site</p>
  </header>

  <!-- 占位内容以启用滚动 -->
  <main class="mt-20 p-8">
    <div class="h-[200vh] bg-gray-100 rounded-lg p-4">
      <p>Scroll down to see the header stay in place.</p>
    </div>
  </main>
</body>
</html>

3. Sticky：章节索引

sticky 非常适合那些随容器滚动，但在到达某个点时“粘滞”的元素，例如侧边栏或章节标题。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Sticky Element</title>
</head>
<body class="p-8">
  <div class="flex gap-8">
    <!-- 主要内容 -->
    <div class="w-2/3 space-y-8">
      <section id="section1"><h2 class="text-2xl font-bold">Section 1</h2><p class="mt-2 h-96 bg-gray-200 p-4 rounded">Content for section 1...</p></section>
      <section id="section2"><h2 class="text-2xl font-bold">Section 2</h2><p class="mt-2 h-96 bg-gray-200 p-4 rounded">Content for section 2...</p></section>
      <section id="section3"><h2 class="text-2xl font-bold">Section 3</h2><p class="mt-2 h-96 bg-gray-200 p-4 rounded">Content for section 3...</p></section>
    </div>

    <!-- 粘性侧边栏 -->
    <aside class="w-1/3">
      <div class="sticky top-8 bg-blue-100 p-4 rounded-lg">
        <h3 class="font-bold mb-2">On this page</h3>
        <ul>
          <li><a href="#section1" class="hover:underline">Section 1</a></li>
          <li><a href="#section2" class="hover:underline">Section 2</a></li>
          <li><a href="#section3" class="hover:underline">Section 3</a></li>
        </ul>
      </div>
    </aside>
  </div>
</body>
</html>