position-absolute 仅使元素脱离文档流且默认定位在 top/left 为 0 处，必须配合 top-/bottom-/start-/end-* 类才能精确定位，其中 start/end 支持 RTL 自适应，数值单位为 rem，且需父容器设为 position-relative 才能正确参照定位。
position-absolute 本身只设置 position: absolute，不带任何偏移 —— 这是它最常被误用的点。光加这个类，元素不会“飞”到你想要的位置，它只是脱离文档流，然后默认停留在原地（top/left 为 0 的位置），但视觉上可能看起来没变，其实已经影响了后续布局。
必须搭配的方位 + 数值类（top/bottom/start/end）
Bootstrap 5 的定位偏移全部通过 top-*、bottom-*、start-*、end-* 实现，不再用 left/right，因为 start/end 支持 RTL 自动翻转。
-
top-0→top: 0；top-3→top: 1rem（不是 3px） -
bottom-50→bottom: 3rem（数值 5 对应 3rem，非线性） -
start-100是特例：等价于left: 100%（仅限start/end，top/bottom没有 100% 类） - 数值范围通常是 0–5，外加
100（仅start/end）和auto（如top-auto）
为什么不能直接用 left/right？
因为 left 和 right 在 RTL（如阿拉伯语）页面中方向固定，无法自动适配；而 start 指“内容起始方向”，LTR 下是左，RTL 下自动变成右，语义更准确。
- 写
start-2，在中文页生效为left: 0.5rem，在阿拉伯语页则等效于right: 0.5rem - 若硬写
left-2，在 RTL 页面会错位，且 Bootstrap 5 工具类根本不提供left-*/right-* - 响应式前缀可用：
sm:start-0、md:end-3等
常见组合与典型用途
单独用 position-absolute 几乎没意义，真正起作用的是组合。以下是最实用的几组：
- 右上角徽标：
position-absolute top-0 end-0 - 底部居中提示条：
position-absolute bottom-0 start-50 translate-middle-x - 导航栏下方悬挂标签（需父容器是
sticky-top或position-relative）：position-absolute top-100 start-0 - 全屏遮罩层：
position-absolute top-0 start-0 w-100 h-100
注意：translate-middle 类（如 translate-middle-x）必须放在偏移类之后，否则 transform 会基于错误的起点计算。
容易踩的坑：父容器没设定位上下文
position-absolute 元素会相对于「最近的已定位祖先」（即 position 值不为 static 的祖先）定位。如果所有祖先都是默认 static，它就相对于 定位 —— 这往往不是你想要的。
- 想让它相对于某个卡片定位？给卡片加
position-relative - 想让它贴着粘性导航栏下沿？确保导航栏有
position: sticky（如sticky-top）或显式position-relative - 加了
position-relative但没效果？检查是否被 Flex/Grid 容器的对齐属性干扰（比如align-items: center可能让绝对定位子元素“看不见”）
数值单位是 rem，不是 px —— 如果你需要像素级控制（比如对齐 1px 边框），别套工具类，直接写内联样式或自定义 CSS。
