absolute定位需父容器设relative，否则相对视口定位；父容器须有尺寸或内容撑开；top/right等表示偏移量而非锚点；居中需配合-translate；z-index仅对定位元素有效且受层叠上下文影响。
absolute 定位必须配合父容器 relative 才能按预期生效
直接给子元素加 absolute 不会“相对于自身”定位，而是相对于最近的已定位祖先（即 position 为 relative、absolute、fixed 或 sticky 的父级）。如果所有祖先都没设定位，它就相对于 viewport 定位——这常导致元素飞出可视区。
正确做法是：先给父容器加 relative，再在子元素上用 absolute + 坐标类：
<div class="relative w-64 h-48 bg-gray-100"> <div class="absolute top-2 right-3 bg-blue-500 text-white px-2 py-1 text-xs">提示</div> </div>
- 父容器必须显式设置尺寸（如
w-64 h-48）或内容撑开，否则relative容器可能高度为 0，子元素看似“消失” - 不要依赖父容器默认有
position: static就省略relative——它不参与定位计算 - 若父容器是 Flex/Grid 容器，
relative依然有效，但需注意子项的absolute会脱离文档流，不影响其他 flex item 的布局
top / right / bottom / left 类名对应的是偏移量，不是位置锚点
Tailwind 的 top-0、right-4 等不是“把元素放在顶部”，而是“从顶部边界向下推 0px”、“从右侧边界向左推 1rem”。它的行为等价于 top: 0、right: 1rem，方向由属性名决定。
-
top-2=top: 0.5rem，不是“贴顶”；要贴顶且无偏移，得用top-0 - 同时写
top-4和bottom-4会导致冲突（浏览器以top为准），绝对定位元素不能靠两个对立方向同时生效来拉伸 - 想让元素居中？别只写
top-1/2 left-1/2，那只是把左上角移到中心——还得配合-translate-x-1/2 -translate-y-1/2
z-index 控制层叠顺序，但必须和 absolute 同时存在才起作用
z-index 类（如 z-10、z-50）只对定位元素（position ≠ static）有效。给一个普通 div 加 z-50 是无效的。
- 层级数字本身无全局意义，只在同一个 stacking context 内比较；父容器若设了
z-0且position: relative，其内部absolute子项的z-10仍可能被外部同级元素遮挡 - 常见误操作：给弹窗 wrapper 加
z-50，但忘了 wrapper 自身没设relative或absolute→z-index被忽略 - Tailwind 默认
z-index范围是 0–50，若需更高（比如覆盖第三方 UI 库），得在tailwind.config.js中扩展theme.extend.zIndex
响应式绝对定位容易错位，坐标类必须逐断点覆盖
响应式类如 md:top-4 不会“继承”基础断点的值。如果你只写 top-2 md:top-4，那么在 sm 屏下仍是 top-2，但在 md 及以上变成 top-4；但如果你漏写了基础断点（比如只写 md:top-4），那么在 sm 下 top 属性根本不存在（即回退到浏览器默认，通常是 auto），元素可能回到文档流位置。
- 务必显式声明最小断点的值，例如：
top-1 md:top-3 lg:top-6 - 坐标类不支持负值响应式快捷写法（如
md:-top-2是合法的，但md:top--2不行） - 移动端常需重置定位：比如桌面端右上角 badge，移动端可能要改成左下角，就得写全
top-2 right-2 sm:bottom-2 sm:left-2
实际项目中最容易被忽略的是 stacking context 的嵌套影响——哪怕所有类都写对了，父容器的 opacity、transform、filter 都会隐式创建新层叠上下文，导致子元素的 z-index 在内部重新计数。这时候光调 z-50 没用，得往上查哪一层意外触发了新 context。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
