Tailwind CSS - Z-Index

Tailwind CSS 现代指南：Z-Index

z-index 属性控制重叠元素的垂直堆叠顺序。z-index 值较高的元素将显示在值较低的元素前面。Tailwind CSS 提供了一组 z-* 工具类，以系统化的方式管理此堆叠顺序。

核心概念：堆叠上下文

这是理解 z-index 最重要的概念。 z-index 值仅在堆叠上下文中才有意义。一个元素必须是“已定位的”（即其 CSS position 为 relative、absolute、fixed 或 sticky）才能接受 z-index 值。此外，像 opacity < 1、transform 或 filter 等属性也可以创建新的堆叠上下文，这有时会导致意外行为。

Z-Index 工具类

Tailwind 提供了一个默认比例尺，专为下拉菜单、模态框和工具提示等常见 UI 组件设计。

类名	CSS 属性
z-0	z-index: 0;
z-10	z-index: 10;
z-20	z-index: 20;
z-30	z-index: 30;
z-40	z-index: 40;
z-50	z-index: 50;
z-auto	z-index: auto;

实际应用：重叠的个人资料头像

此示例演示了如何创建一堆重叠的头像，这是一种常见的 UI 模式。每个头像都需要进行定位，然后使用 z-index 来控制哪个显示在顶部。

<!-- 假设这是一个标准的 Tailwind CSS 项目设置 -->
<div class="flex items-center justify-center bg-gray-100 p-16">
  <!-- 容器建立了一个共享的坐标系 -->
  <div class="relative flex items-center h-20">

    <!-- 每个头像都在容器内进行绝对定位 -->
    <img class="h-16 w-16 rounded-full border-4 border-white object-cover
                absolute left-0 z-30"
         src="/path/to/avatar1.jpg" alt="User 1">

    <img class="h-16 w-16 rounded-full border-4 border-white object-cover
                absolute left-10 z-20"
         src="/path/to/avatar2.jpg" alt="User 2">

    <img class="h-16 w-16 rounded-full border-4 border-white object-cover
                absolute left-20 z-10"
         src="/path/to/avatar3.jpg" alt="User 3">

    <div class="h-16 w-16 rounded-full bg-blue-500 text-white
                flex items-center justify-center font-bold
                absolute left-32 z-0 border-4 border-white">
      +5
    </div>

  </div>
</div>

负值和任意 Z-Index 值

Tailwind 通过在类名前添加破折号（例如 -z-10）来支持负 z-index 值。这对于将装饰性元素放置在其父容器的后面非常有用。对于特定值，特别是对于必须位于顶部的模态框或覆盖层，您可以使用任意值。

<!-- 一个位于内容后面的装饰性斑点 -->
<div class="absolute top-0 right-0 w-48 h-48 bg-purple-200 rounded-full -z-10"></div>

<!-- 必须位于所有元素之上的模态覆盖层 -->
<div class="fixed inset-0 bg-black/50 z-[999]"></div>

常见错误和最佳实践

• 最佳实践： 使用提供的 z-index 比例尺（10、20、30…）来管理您的核心 UI 组件的堆叠。避免使用 z-[99999] 等任意高数值，因为这表明您的堆叠上下文管理不善。
• 最佳实践： 在组件的包装器（position: relative）上创建新的堆叠上下文，以包含其子元素的 z-index 值。这可以防止它们干扰页面上的其他组件。
• 常见错误： 将 z-10 应用于未定位的元素（即其 position 为默认的 static）。z-index 属性将被忽略。
• 调试提示： 如果一个 z-index 值较高的元素却出现在另一个元素后面，最可能的原因是它们位于不同的堆叠上下文。使用您的浏览器开发者工具检查这两个元素的父级。查找任何具有 opacity、transform、filter 或 position: relative 等属性的祖先元素，这些属性可能会创建一个新的、较低的堆叠上下文。