理解 Tailwind CSS 中 position 相关类与原生 CSS position 属性的对应关系
掌握 static、relative、absolute、fixed、sticky 五种定位模式的核心区别
学会利用定位属性构建复杂的页面布局（如悬浮导航、模态框、吸顶标题）
理解包含块（Containing Block）对绝对定位和固定定位的影响
在网页开发中，控制元素在文档流（DOM）中的位置是布局的核心。Tailwind CSS 提供了一套实用工具类，作为原生 CSS position 属性的替代方案。通过这些类，开发者可以精确控制元素是如何相对于其正常位置、父元素或浏览器视口进行定位的。
虽然 CSS 原生属性只有一个 position，但 Tailwind 将其拆分为多个语义化的类，以便快速应用。
Tailwind CSS 主要支持以下五种定位类：
这是 HTML 元素的默认定位方式。元素按照正常的文档流进行排列。设置 top、right、bottom、left 或 z-index 属性对此类元素无效。
语法：
<element class="static">...</element>示例：
在此示例中，父容器是 static 定位。内部的子元素使用了 absolute 定位，但由于父元素是 static，子元素将相对于更上层的非 static 祖先（通常是 body 或 html）进行定位，而不是相对于这个绿色的父容器。
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<center>
<h1 class="text-green-600 text-5xl font-bold">
编程技术站
</h1>
<b>Tailwind CSS Position 类</b>
<div class="static text-left p-2 m-2 bg-green-200 h-48">
<p class="font-bold">Static 父元素</p>
<!-- 注意：由于父元素是 static，这个 absolute 子元素不会相对于此父元素定位 -->
<div class="absolute bottom-0 left-0 p-2
bg-green-500 text-white">
<p>Absolute 子元素</p>
</div>
</div>
</center>
</body>
</html>使用此类定位的元素将相对于 ** 浏览器视口（viewport）** 进行固定。即使页面滚动，该元素也会保持在屏幕上的同一位置。我们可以使用 top、right、bottom、left 工具类来设置其具体位置。
常见场景：导航栏、回到顶部按钮、悬浮广告。
语法：
<element class="fixed">...</element>示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<center>
<h1 class="text-green-600 text-5xl font-bold">
编程技术站
</h1>
<b>Tailwind CSS Position 类</b>
<div class="overflow-auto bg-green-200
mx-16 h-24 text-justify border border-green-300">
<!-- 固定定位元素，即使父容器滚动，它也会相对于视口固定 -->
<div class="float-right fixed top-2 right-10">
<p class="bg-green-500 p-2 text-white shadow-lg">
编程技术站 Fixed 子元素
</p>
</div>
<p class="pt-10">
卡提希娅原为埃格拉小镇的普通少女，因在岁主感恩礼醉酒扰乱祭典遭到修会惩罚。
为摆脱鸣式利维亚坦的控制，她将自我意识分离为保留本名的“卡提希娅”与继承力量的“芙露德莉斯”。
在漂泊者的介入下，她通过夏空的共鸣能力在梦境中传递线索，并最终协助斩杀被鸣式异化的身躯。
卡提希娅原为埃格拉小镇的普通少女，因在岁主感恩礼醉酒扰乱祭典遭到修会惩罚。
为摆脱鸣式利维亚坦的控制，她将自我意识分离为保留本名的“卡提希娅”与继承力量的“芙露德莉斯”。
在漂泊者的介入下，她通过夏空的共鸣能力在梦境中传递线索，并最终协助斩杀被鸣式异化的身躯。
卡提希娅原为埃格拉小镇的普通少女，因在岁主感恩礼醉酒扰乱祭典遭到修会惩罚。
为摆脱鸣式利维亚坦的控制，她将自我意识分离为保留本名的“卡提希娅”与继承力量的“芙露德莉斯”。
在漂泊者的介入下，她通过夏空的共鸣能力在梦境中传递线索，并最终协助斩杀被鸣式异化的身躯。
（此处内容用于演示滚动效果...）
</p>
<p class="mt-4">
继续滚动查看固定元素是否保持在视口位置...
</p>
</div>
</center>
</body>
</html>使用此类定位的元素会脱离正常的文档流。这意味着它原本占据的空间会被释放，周围的元素会表现得好像该元素不存在一样。它通常相对于最近的非 static 定位的祖先元素进行定位。
常见场景：徽章、弹窗、图片上的文字覆盖层。
语法：
<element class="absolute">...</element>示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<center>
<h1 class="text-green-600 text-5xl font-bold">
编程技术站
</h1>
<b>Tailwind CSS Position 类</b>
<!-- 为了演示 absolute 的效果，通常父元素需要设置为 relative -->
<div class="relative text-left p-2 m-2 bg-green-200 h-48 border border-dashed border-green-400">
<p class="font-bold">Relative 父元素 (作为定位参考)</p>
<!-- 绝对定位子元素，相对于上面的 relative 父元素定位 -->
<div class="absolute bottom-0 left-0 p-2
bg-green-500 text-white">
<p>Absolute 子元素</p>
</div>
</div>
<p class="text-sm text-gray-500 mt-2">注意：子元素已脱离文档流，不再占用父元素内的常规空间。</p>
</center>
</body>
</html>使用此类定位的元素仍然处于正常的文档流中，但可以通过 top、right、bottom、left 属性相对于其原始位置进行微调。
关键特性：
不脱离文档流，原本占据的空间保留。
常作为 absolute 定位子元素的“包含块”（参考系）。
语法：
<element class="relative">...</element>示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<center>
<h1 class="text-green-600 text-5xl font-bold">
编程技术站
</h1>
<b>Tailwind CSS Position 类</b>
<div class="static text-left p-2 m-2 bg-green-200 h-48">
<p class="font-bold">Static 父元素</p>
<!-- 相对定位元素，相对于自己原本的位置偏移 -->
<div class="relative top-2 left-2 p-2 inline-block
bg-green-500 text-white">
<p>Relative 子元素</p>
</div>
<!-- 兄弟元素，受文档流影响，不会被 Relative 子元素覆盖（除非使用负边距等） -->
<div class="relative p-2 inline-block
bg-green-600 text-white ml-2">
<p>Relative 兄弟子元素</p>
</div>
</div>
</center>
</body>
</html>这是一种混合定位模式。元素首先表现为 relative（相对定位），直到它在滚动过程中跨越了指定的阈值（例如 top-0），此时它表现为 fixed（固定定位），直到其父元素离开视口。
常见场景：列表标题吸顶、表格表头固定。
语法：
<element class="sticky">...</element>示例：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center">
<center>
<h1 class="text-green-600 text-5xl font-bold">
编程技术站
</h1>
<b>Tailwind CSS Position 类</b>
<!-- 必须设置 overflow-auto 或其他溢出属性，sticky 才能在滚动容器中生效 -->
<div class="w-3/4 bg-green-200 h-24 overflow-auto border border-green-300 mt-4">
<div>
<div class="p-2 sticky top-0 bg-green-500 text-white text-right font-bold">
Sticky 标题 1
</div>
<p class="py-4 text-sm">
卡提希娅原为埃格拉小镇的普通少女，因在岁主感恩礼醉酒扰乱祭典遭到修会惩罚。
为摆脱鸣式利维亚坦的控制，她将自我意识分离为保留本名的“卡提希娅”与继承力量的“芙露德莉斯”。
在漂泊者的介入下，她通过夏空的共鸣能力在梦境中传递线索，并最终协助斩杀被鸣式异化的身躯。
</p>
</div>
<div>
<div class="p-2 sticky top-0 bg-green-500 text-white text-right font-bold">
Sticky 标题 2
</div>
<p class="py-4 text-sm">
同样的内容用于演示第二个粘滞区域。
当第一个标题滚出视口后，第二个标题会接替吸附效果。
</p>
</div>
<div>
<div class="p-2 sticky top-0 bg-green-500 text-white text-right font-bold">
Sticky 标题 3
</div>
<p class="py-4 text-sm">
这是第三个部分的内容。
</p>
</div>
</div>
</center>
</body>
</html>static 是默认值，元素遵循文档流，无法通过 top/left 等属性移动。
relative 让元素相对于自己原来的位置移动，且不脱离文档流，常用于给 absolute 子元素提供定位基准。
absolute 使元素完全脱离文档流，相对于最近的非 static 祖先定位；若没有这样的祖先，则相对于初始包含块（通常是 body）。
fixed 使元素相对于浏览器窗口（视口）固定，滚动页面时元素位置不变。
sticky 是一种智能定位，结合了 relative 和 fixed 的特点，常用于实现“吸顶”效果，需配合 top、bottom 等阈值属性使用。
如果你想在一个卡片组件的右上角显示一个红色的“NEW”标签，你应该如何组合使用父元素和子元素的 position 类？请简述思路。
为什么在使用 sticky 类时，有时候会发现元素并没有产生“吸顶”效果？请列举两个可能的原因（提示：考虑父元素的高度和溢出属性）。
fixed 定位和 absolute 定位的主要区别是什么？在什么情况下，absolute 定位的元素表现会和 fixed 类似？