理解 Z-index 在网页布局中的作用及其在三维空间中的堆叠顺序概念
掌握 Tailwind CSS 中 z-0 到 z-50 等常用层级工具类的使用方法
学会通过相对定位（relative）与 Z-index 配合解决元素遮挡问题
能够根据实际项目需求选择合适的层级值，避免层级冲突
了解如何将传统 CSS 的 z-index 属性迁移至 Tailwind CSS 工具类体系
在网页开发中，当多个元素在页面上发生重叠时，浏览器需要决定哪个元素显示在最上层，哪个显示在下层。这个“上下”关系就是所谓的堆叠顺序（Stacking Order）。
CSS 中的 z-index 属性用于控制元素在 Z 轴（垂直于屏幕的方向）上的位置。数值越大，元素越靠近用户（显示在上层）；数值越小，元素越远离用户（显示在下层）。
Tailwind CSS 提供了一套便捷的实用类，让我们无需编写自定义 CSS 即可快速控制元素的层级。这些类直接对应 CSS 的 z-index 属性值。
Tailwind CSS 默认提供以下层级工具类：
注意：Tailwind 选择 10 为间隔（如 10, 20, 30），是为了方便开发者在中间插入自定义层级（例如需要 15 时，可以通过配置扩展），避免层级值过于拥挤导致难以维护。
在使用任何 z-* 类之前，必须明确一个关键概念：z-index 仅对定位元素生效。
这意味着，目标元素必须拥有以下 position 属性之一：
relative (相对定位)
absolute (绝对定位)
fixed (固定定位)
sticky (粘性定位)
如果元素是默认的 static 定位，设置 z-index 将不会产生任何效果。通常配合 relative、absolute 等类一起使用。
z-0 类将元素的 z-index 设置为 0。这通常用于确保元素处于正常的文档流层级，或者作为其他高层级元素的参考基准。
语法示例：
<div class="relative z-0">内容</div>代码演示：
以下示例展示了多个色块堆叠的效果。注意，所有色块都设置了 relative 定位。为了直观展示重叠效果，部分元素使用了内联样式 top 进行微调（实际开发中建议使用 Tailwind 的 top-* 类或 translate 类）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS Z-Index 示例 - 编程技术网</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center p-10">
<h1 class="text-green-600 text-5xl font-bold mb-4">
编程技术网
</h1>
<p class="font-bold text-lg mb-6">Tailwind CSS Z-Index 层级演示</p>
<div class="flex flex-col items-center space-y-[-40px]">
<!-- z-0 层级 -->
<div class="relative z-0 w-full h-12 bg-green-400 flex items-center justify-center text-white font-bold shadow">
层级 0 (z-0)
</div>
<!-- z-10 层级 -->
<div class="relative z-10 w-full h-12 bg-yellow-400 flex items-center justify-center text-white font-bold shadow">
层级 10 (z-10)
</div>
<!-- z-20 层级 -->
<div class="relative z-20 w-full h-12 bg-red-400 flex items-center justify-center text-white font-bold shadow">
层级 20 (z-20)
</div>
<!-- z-30 层级 -->
<div class="relative z-30 w-full h-12 bg-blue-400 flex items-center justify-center text-white font-bold shadow">
层级 30 (z-30)
</div>
<!-- z-40 层级 -->
<div class="relative z-40 w-full h-12 bg-green-300 flex items-center justify-center text-gray-800 font-bold shadow">
层级 40 (z-40)
</div>
<!-- z-50 层级 -->
<div class="relative z-50 w-full h-12 bg-orange-400 flex items-center justify-center text-white font-bold shadow">
层级 50 (z-50) - 最顶层
</div>
</div>
</body>
</html>这些类用于处理常见的组件堆叠需求，例如卡片悬浮、简单的下拉提示等。
z-10: 适用于轻微的悬浮效果，如按钮 hover 状态下的轻微抬起。
z-20: 常用于普通下拉菜单或工具提示（Tooltip）。
z-30: 适用于更复杂的浮层，如日期选择器面板。
语法示例：
<div class="absolute z-20">下拉菜单内容</div>当需要元素显著高于页面其他内容时，使用这些类。
z-40: 适用于侧边栏导航、浮动操作按钮（FAB）。
z-50: 通常保留给最重要的全局组件，如模态框（Modal）、全屏遮罩层或通知横幅。
语法示例：
<!-- 模态框背景 -->
<div class="fixed inset-0 z-50 bg-black bg-opacity-50"></div>
<!-- 模态框内容 -->
<div class="fixed inset-0 z-50 flex items-center justify-center">
<div class="bg-white p-6 rounded shadow-xl">模态框内容</div>
</div>定位先行：使用 z-* 类前，务必给元素添加 relative、absolute、fixed 或 sticky 类，否则层级设置无效。
间隔设计：Tailwind 默认使用 10 的倍数（0, 10, 20...），这种设计预留了充足的中间值空间，便于后期维护和自定义扩展。
场景匹配：
z-0 ~ z-10：常规内容流和轻微交互。
z-20 ~ z-30：局部浮层（菜单、提示）。
z-40 ~ z-50：全局浮层（模态框、遮罩）。
替代方案：对于更精细的控制，可以在 tailwind.config.js 中扩展 zIndex 主题配置，添加如 60, 70 或负值层级。
如果一个元素设置了 class="z-50" 但仍然被另一个没有设置 z-index 的元素遮挡，可能的原因是什么？（提示：检查定位属性）
在一个复杂的管理后台系统中，侧边栏、顶部导航、内容区弹窗、全局加载蒙层这四个组件，你会如何分配 z-0 到 z-50 之间的层级值？请给出你的分配方案并说明理由。
为什么 Tailwind CSS 不直接使用 z-1, z-2, z-3 这样的连续整数，而是采用 z-10, z-20 的跳跃式命名？这种设计在实际团队协作中有什么优势？