掌握 Tailwind CSS 中控制元素显示模式（Display）和可见性（Visibility）的核心类名及其应用场景。
理解相对、绝对、固定及粘性定位（Position）的工作原理，并学会使用方位类名进行精确控制。
熟练运用层叠上下文（Z-Index）和溢出处理（Overflow）类名解决常见的布局重叠与内容截断问题。
能够组合使用 inset 系列快捷类名，高效完成复杂的居中或贴边布局。
通过实际代码示例，将理论属性转化为可落地的前端界面开发能力。
在网页布局中，决定元素如何渲染以及是否参与文档流是第一步。Tailwind CSS 提供了与 CSS display 属性直接对应的实用类。
常用类名
block: 将元素转换为块级元素，独占一行。
inline-block: 元素表现为行内块，既保留行内特性（不独占一行），又能设置宽高。
inline: 标准的行内元素，无法设置宽高。
flex / inline-flex: 启用 Flexbox 布局。flex 为块级 Flex 容器，inline-flex 为行内 Flex 容器。
grid / inline-grid: 启用 Grid 网格布局。
flow-root: 创建新的块格式化上下文（BFC），常用于清除浮动，无需额外添加空标签。
hidden: 等同于 display: none;，元素完全不渲染，不占据空间。
定位属性决定了元素在文档流中的位置行为。Tailwind CSS 提供了完整的 position 映射。
定位类型
static: 默认值，元素遵循正常的文档流，top/right/bottom/left 无效。
relative: 相对定位。元素仍在文档流中，但可以作为其内部绝对定位子元素的参考点。
absolute: 绝对定位。元素脱离文档流，相对于最近的非 static 祖先元素定位。
fixed: 固定定位。元素脱离文档流，相对于浏览器视口（viewport）定位，滚动时位置不变。
sticky: 粘性定位。元素在跨越特定阈值前为相对定位，之后变为固定定位（需指定 top 等偏移量）。
方位偏移量
Top / Right / Bottom / Left
一旦元素被定位为 relative, absolute, fixed 或 sticky，即可使用方位类名控制其位置。Tailwind 默认基于 0.25rem (4px) 的步长。
单边控制: top-0, left-4, right-10, bottom-full 等。
组合控制 (Inset):
inset-0: 等同于 top-0 right-0 bottom-0 left-0，常用于全屏覆盖层。
inset-x-0: 仅左右为 0，常用于水平居中拉伸。
inset-y-0: 仅上下为 0，常用于垂直填满。
visible: 默认状态，元素可见。
invisible: 元素不可见，但仍占据文档流中的空间（不同于 hidden）。
应用场景: 常用于 hover 效果中预先占位，或通过 JavaScript 切换显示状态而不引起页面重排（Reflow）。
z-index 控制定位元素在 Z 轴上的堆叠顺序。数值越大，越靠近用户。
预设类名: z-0, z-10, z-20, z-30, z-40, z-50。
自动值: z-auto (默认行为)。
自定义值: 支持任意整数，如 z-[99]。
注意: z-index 仅对定位元素（position 不为 static）有效。
当内容超出容器尺寸时，overflow 属性决定了如何处理多出的部分。
常用类名
overflow-auto: 仅在需要时显示滚动条（最常用）。
overflow-hidden: 裁剪溢出内容，不显示滚动条。常用于圆角容器防止图片溢出或隐藏下拉溢出。
overflow-visible: 默认值，内容溢出容器显示。
overflow-scroll: 始终显示滚动条，无论内容是否溢出。
轴向控制:
overflow-x-scroll / overflow-x-auto: 仅控制水平方向。
overflow-y-scroll / overflow-y-auto: 仅控制垂直方向。
