定位，是 CSS 布局中极其重要的一个手段。使用定位布局，可以让元素脱离正常的文档流，从而悬浮在页面的任何位置。
在 Tailwind CSS 中，使用定位相关的类名，我们可以轻松实现诸如 “消息红点”、“固定导航栏”、“全屏遮罩” 等高级 UI 效果。
Tailwind CSS 定位布局语法
在 Tailwind CSS 中，定位系统主要由 2 部分组成：
1. 定位模式
“定位模式”，用于决定元素以什么样的方式进行定位。常用类名如下表所示：
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| static（默认） | position: static; | 静态定位 |
| relative | position: relative; | 相对定位 |
| absolute | position: absolute; | 绝对定位 |
| fixed | position: fixed; | 固定定位 |
| sticky | position: sticky; | 粘性定位 |
2. 偏移量
当元素使用了非 static 的定位后，我们就可以使用方向相关的类名来改变它的位置了。
语法：
top-{尺寸}
right-{尺寸}
bottom-{尺寸}
left-{尺寸}说明：
方向类名也支持负值，比如 “-top-4” 表示向上偏移 16px。
Tailwind CSS 实现 “父相子绝”
我们都知道，定位最重要的技巧是 “父相子绝”，即父元素使用相对定位、子元素使用绝对定位。
示例 1：父相子绝
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<button class="relative px-6 py-2 bg-green-500 text-white rounded cursor-pointer">
我的消息
<div class="absolute -top-2 -right-2 w-4 h-4 bg-red-500 rounded-full"></div>
</button>
</body>
</html>页面效果如下图所示。
分析：
如果想要让一个小元素（比如消息红点）精确地放到父元素的右上角，此时就应该使用 “父相子绝” 来实现。
对于这个例子中，我们给父元素（button）加上了 relative。此时就相当于告诉内部的所有的绝对定位元素：“你只能在我的地盘内活动”。
然后我们给子元素（div）加上了 absolute，并配合 -top-2 和 -right-2（负数偏移量），这样可以使其向外拉拽，刚好悬浮在父容器的右上角。
Tailwind CSS 实现 “全覆盖”
如果要实现一个 “半透明遮罩层”（比如绿叶网弹窗背后的黑底），传统 CSS 需要编写下面一串代码：
top: 0;
right: 0;
bottom: 0;
left: 0;而在 Tailwind 中，我们只需要使用一个简单的 “inset-0” 类名就可以轻松实现 “全覆盖” 效果了。
示例 2：全覆盖效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="relative w-64 h-40 bg-gray-200">
<p class="text-gray-700">绿叶网 - 为好教程，全力以赴</p>
<div class="absolute inset-0 bg-black/50"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
inset-0 等价于同时设置了上下左右的偏移量为 0。然后配合 absolute 和带有 relative 的父容器，这个黑色的半透明层就刚好盖住了整张卡片。
Tailwind CSS 固定定位
固定定位（fixed）会让元素完全脱离文档流，并相对于浏览器窗口进行定位。也就是说，不管你如何向下滚动页面，固定定位的元素都会 “死死地” 钉在屏幕的某个位置。
在 Tailwind CSS 中，我们可以使用 “fixed” 这个类名来实现元素的固定定位。
语法：
fixed说明：
fixed 相当于 position: fixed;。
示例 3：使用固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="w-40 h-[2000px] leading-[2000px] bg-blue-300">
无定位的 div 元素
</div>
<div class="fixed top-12 left-48 w-24 h-24 bg-red-300">
固定定位的 div 元素
</div>
</body>
</html>页面效果如下图所示。
分析：
我们尝试拖动浏览器的滚动条，其中有固定定位的 div 元素不会有任何位置改变，但没有定位的 div 元素会改变，如下图所示。
Tailwind CSS 粘性定位
粘性定位（sticky）是一种混合了相对定位和固定定位的定位方式。粘性定位的元素在滚动到指定值之前会表现得像相对定位元素，之后则表现为固定定位，就像是在页面中 “粘住” 一样。
在 Tailwind CSS 中，我们可以使用 “sticky” 这个类名来实现元素的粘性定位。
语法：
sticky说明：
sticky 相当于 position: sticky;。
示例 4：使用粘性定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="py-20 text-center text-3xl bg-sky-300">1</div>
<div class="sticky top-0 p-12 text-center text-xl bg-pink-500">sticky</div>
<div class="py-20 text-center text-3xl bg-sky-300">2</div>
<div class="py-20 text-center text-3xl bg-sky-300">3</div>
<div class="py-20 text-center text-3xl bg-sky-300">4</div>
<div class="py-20 text-center text-3xl bg-sky-300">5</div>
<div class="py-20 text-center text-3xl bg-sky-300">6</div>
<div class="py-20 text-center text-3xl bg-sky-300">7</div>
<div class="py-20 text-center text-3xl bg-sky-300">8</div>
</body>
</html>页面效果如下图所示。
分析：
在默认情况下，所有 div 元素都在正常文档流中垂直放着。当我们从上到下滚动页面时，sticky 元素一开始会随着页面滚动。但是，当元素的顶部到达视口顶部时，它会 “粘” 在页面顶部（top: 0），而不会再随页面滚动。这就是 “粘性定位” 效果。
常见问题
1. 为什么我的 absolute 元素直接飞到了屏幕的最边缘，而根本不管它外面的 div 呢？
这是新手使用绝对定位时必然会踩的坑。absolute 元素的特点是 “拼爹”，它会一直往外层找，看哪一个祖先元素设置了定位（通常是 relative）。如果它找了一圈，发现所有的祖先元素都没有定位，它就会直接把 “整个浏览器窗口” 当做自己的 “爹”，从而飞到了屏幕的最边缘。
如果你发现出现了这种现象，首先应该想到的是去检查一下父元素有没有漏写了 relative 类名。
2. 两个绝对定位的元素重叠了，我想让其中一个显示在上面怎么办？
此时就需要使用 z-index 属性了。在 Tailwind 中，我们可以使用 z-10、z-20、z-30, z-40、z-50 等类名。数值越大，元素就越靠上。
此外需要注意的是，z-index 属性只有在元素设置了定位（非 static）之后才会生效。如果一个元素没有 relative、absolute、fixed 或 sticky，给它加上 z-10 之类是毫无意义的。
