理解 top、right、bottom、left 及 inset 类在 Tailwind CSS 中的作用机制
掌握这些属性必须配合定位属性（如 relative、absolute、fixed）使用的核心原则
学会使用 inset 简写类快速控制元素在四个方向上的偏移
能够利用这些工具类实现元素的精准对齐、全屏覆盖及角落定位
在 CSS 布局中，top、right、bottom 和 left 属性用于控制已定位元素（positioned elements）的具体位置。Tailwind CSS 将这些属性封装为实用的工具类，提供了从 0 到各种 rem 值的丰富选项。
重要提示：
这些类仅对定位元素生效。如果一个元素没有设置position（如relative、absolute、fixed或sticky），那么应用top-0或left-10等类将不会产生任何视觉效果。
Tailwind 中的默认值通常涵盖 0 和 auto。你可以通过修改类名中的数字（例如将 0 改为 4、10 等）来应用不同的 rem 值。
Tailwind CSS 提供了以下主要方位控制类：
注：类名中的
0可以替换为 Tailwind 间距尺度中的任意有效值（如1,2,4,full,auto等）。
inset-{value}
inset 是 top、right、bottom 和 left 的简写形式。当需要让一个绝对定位的元素填满其父容器，或者从四周同时向内偏移时使用。
inset-0：将元素的上下左右边距均设置为 0。常用于创建覆盖整个父容器的遮罩层或背景。
语法：
<element class="inset-0">...</element>示例：
在此示例中，内部的深绿色 div 使用了 absolute 定位和 inset-0，因此它完全覆盖了外部的浅绿色父容器。
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4">编程技术站</h1>
<p class="text-2xl">Top/Right/Bottom/Left 演示</p>
</div>
<!-- 父容器必须是 relative, absolute 或 fixed 才能作为定位参考 -->
<div class="relative h-24 w-24 bg-green-400 m-4">
<!-- 子元素绝对定位，且上下左右均为 0，即填满父容器 -->
<div class="absolute inset-0 bg-green-800 opacity-75"></div>
</div>
<p class="m-4 text-sm text-gray-600">效果：内部深色方块完全覆盖外部浅色方块。</p>
</body>
</html>inset-y-{value}
此类仅设置 top 和 bottom 属性。常用于让元素在垂直方向上拉伸以填满父容器，同时保持水平宽度不变。
inset-y-0：将元素的顶部和底部边距设置为 0。
语法：
<element class="inset-y-0">...</element>示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4">编程技术站</h1>
<p class="text-2xl">Inset-Y 演示</p>
</div>
<div class="relative h-28 w-28 bg-green-400 m-4 border border-dashed border-green-600">
<!-- 垂直方向填满 (top:0, bottom:0)，水平方向固定宽度 w-16 -->
<div class="absolute inset-y-0 w-16 bg-green-800 opacity-75">
<span class="text-white text-xs p-1">垂直拉伸</span>
</div>
</div>
<p class="m-4 text-sm text-gray-600">效果：内部深色方块高度与父容器一致，宽度固定。</p>
</body>
</html>inset-x-{value}
此类仅设置 left 和 right 属性。常用于让元素在水平方向上拉伸以填满父容器。
inset-x-0：将元素的左侧和右侧边距设置为 0。
语法：
<element class="inset-x-0">...</element>示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4">编程技术站</h1>
<p class="text-2xl">Inset-X 演示</p>
</div>
<div class="relative h-28 w-28 bg-green-400 m-4 border border-dashed border-green-600">
<!-- 水平方向填满 (left:0, right:0)，垂直方向固定高度 h-9 -->
<div class="absolute inset-x-0 h-9 bg-green-800 opacity-75">
<span class="text-white text-xs p-1">水平拉伸</span>
</div>
</div>
<p class="m-4 text-sm text-gray-600">效果：内部深色方块宽度与父容器一致，高度固定。</p>
</body>
</html>top / left / right / bottom
当你只需要控制元素在某个特定方向上的位置时，使用单向类。这在将元素定位到角落或特定偏移量时非常有用。
常用组合：
top-0 + left-0：左上角
top-0 + right-0：右上角
bottom-0 + left-0：左下角
bottom-0 + right-0：右下角
语法：
<element class="top-0">...</element>
<element class="left-0">...</element>
<!-- 其他同理 -->示例 A：左上角定位 (top-0 + left-0)
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4">编程技术站</h1>
<p class="text-2xl">Top/Left 演示</p>
</div>
<div class="relative h-36 w-36 bg-green-400 m-4 border border-dashed border-green-600">
<!-- 定位到左上角 -->
<div class="absolute left-0 top-0 w-16 h-16 bg-green-800 opacity-75 flex items-center justify-center">
<span class="text-white text-xs">左上</span>
</div>
</div>
</body>
</html>示例 B：右下角定位 (right-0 + bottom-0)
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4">编程技术站</h1>
<p class="text-2xl">Right/Bottom 演示</p>
</div>
<div class="relative h-36 w-36 bg-green-400 m-4 border border-dashed border-green-600">
<!-- 定位到右下角 -->
<div class="absolute right-0 bottom-0 w-16 h-16 bg-green-800 opacity-75 flex items-center justify-center">
<span class="text-white text-xs">右下</span>
</div>
</div>
</body>
</html>前提条件：top、right、bottom、left 和 inset 类必须与 position 类（如 relative、absolute、fixed、sticky）配合使用才有效。
inset 简写：
inset-0 等同于 top-0 right-0 bottom-0 left-0，常用于全屏遮罩或填充父容器。
inset-y-0 控制垂直方向拉伸。
inset-x-0 控制水平方向拉伸。
数值灵活性：类名中的数字代表 Tailwind 的间距尺度（spacing scale），不仅仅是 0，还可以是 1、2、4、8、full 等，以实现精确的像素或百分比控制。
常见场景：
角落徽章（Badge）：使用 absolute + top-0 + right-0。
居中覆盖层：使用 absolute + inset-0 + flex + items-center + justify-center。
侧边栏或通栏横幅：使用 inset-y-0 或 inset-x-0。
如果你有一个 relative 定位的父容器，想要让一个 absolute 定位的子元素距离父容器顶部 1rem，距离左侧 2rem，应该使用哪些 Tailwind 类？（提示：参考 Tailwind 间距尺度，1rem 通常对应 4，2rem 对应 8）。
为什么有时候给一个元素添加了 top-10 却没有看到任何移动效果？请检查该元素可能缺少了什么关键的 CSS 属性（在 Tailwind 中对应的类是什么）？
想要创建一个覆盖整个屏幕的半透明黑色遮罩层（Modal Overlay），应该给遮罩层 div 应用哪些 Tailwind 类？请列出至少三个关键类（包括定位、方位和背景色）。