必须为relative容器显式设置position: relative，否则absolute子元素会向上寻找已定位祖先，导致定位失控；其偏移需配合top/right/bottom/left，且z-index须分层管理，响应式定位需用断点前缀隔离。
relative容器必须显式设置定位上下文
不加 position: relative 的父元素，absolute 子元素会一直往上找最近的已定位祖先，最终可能脱离预期容器。常见现象是弹窗、下拉菜单飞到页面左上角。
- 必须给父容器加
relative—— Tailwind 中就是relative工具类，不能只靠absolute子元素自己“猜”位置 - 如果父容器本身是 Flex 或 Grid 容器，
relative依然要显式写上，它不继承自布局模式 - 避免套用在
body或未设宽高的空div上：没有尺寸约束的relative容器，会导致absolute元素定位基准不可控
absolute元素的偏移必须配合top/right/bottom/left
absolute 本身只改变定位方式，不自动贴边；不写偏移量时，它默认停留在文档流原来的位置（但已脱离流），视觉上容易误以为“没生效”。
- 常用组合：
absolute top-0 left-0（左上角）、absolute bottom-2 right-2（右下角微调） - 不要只写
absolute就期望它“居中”或“贴右”——那得靠top/right配合数值类（如top-1/2+transform -translate-y-1/2） - 注意负值：Tailwind 支持
-top-4，适合做悬停时向上浮出的 tooltip
z-index层级冲突常被忽略
当多个 absolute 元素重叠，或与 sticky 导航栏、modal 背景交互时，z-index 不写就等于 auto，浏览器按 DOM 顺序堆叠，极易错乱。
- Tailwind 默认
z-0到z-50，关键组件建议显式声明：z-10（下拉）、z-20（tooltip）、z-50（modal overlay） -
relative父容器若没设z-index，其内部absolute子元素的层级只在该容器内有效；跨容器比较时，看的是父容器自身的z-index - 避免全局用
z-50：不同模块应分层管理，比如导航栏z-40，它的下拉菜单用z-41，而非一律拉满
响应式定位需要独立控制各断点
同一元素在移动端可能需贴底，在桌面端贴右上角，但 top-4 right-4 和 bottom-4 right-4 不能共存于一个 class 列表里——Tailwind 不支持条件覆盖，得靠断点前缀隔离。
- 正确写法：
absolute md:top-4 md:right-4 lg:bottom-4 lg:right-6 - 错误写法：
absolute top-4 right-4 bottom-4 right-6（后者会覆盖前者，且无断点逻辑） - 注意：
md:及以上断点才启用定位调整，小屏保持默认文档流位置或用sm:static退回到普通布局
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
