Bootstrap 5 的 position 类仅设置 position 属性值，需配合 top/bottom/start/end 等偏移类才能定位；start/end 替代 left/right，支持 RTL；position-sticky 需滚动上下文；偏移值单位为 rem，非 px；绝对定位依赖最近非 static 祖先，父容器常需加 position-relative。
Position工具类只控制position属性，不负责偏移量
Bootstrap 5 的 position-static、position-relative、position-absolute、position-fixed 和 position-sticky 这些类，只设置 CSS 的 position 值，不会自动加 top/left 等偏移。很多人加了 position-absolute 发现元素没动，就是因为漏了偏移类。
- 必须配合
top-0、bottom-50、start-3、end-100等「方位 + 数值」类才能真正定位 -
start/end替代了旧版的left/right，响应式方向感知更强（RTL 场景下自动翻转） -
position-sticky需要父容器有明确高度或可滚动上下文，否则表现和relative无异
用top/bottom/start/end 类时数值单位是 rem，不是 px
Bootstrap 5 默认 spacing scale 是基于 $spacers（如 top-0 → top: 0，top-3 → top: 1rem），不是像素值。这意味着它会随根字号缩放，也和 padding/margin 类保持一致。
- 数值 0–5 对应 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem；
top-100是特例，表示top: 100% - 如果需要精确到像素（比如对齐某像素级边框），别硬套工具类，直接写内联样式或自定义 CSS
-
translate类（如translate-middle）和偏移类混用时要注意层叠顺序：先偏移再平移，否则中心对齐可能失效
position-absolute 元素脱离文档流，父容器需设 position-relative
绝对定位元素会相对于最近的「定位上下文」（即 position 值非 static 的祖先）。若没手动设，它可能一直往上找到 <body>，导致位置飘移。
- 90% 的错位问题都源于父容器仍是
position-static（默认值），加个position-relative就能锁定参考系 - 不要给父容器同时加
overflow-hidden和position-relative后又期望子元素溢出可见——overflow优先级更高 - 嵌套多层
position-absolute时，每层都要确认自己的定位上下文是否符合预期，用浏览器开发者工具的「Layout」面板看 computedposition最准
position-sticky 在 flex 或 grid 容器里可能失效
Sticky 定位依赖「滚动容器」提供滚动轴。但 Flexbox 或 Grid 容器若未显式设置 overflow，其子项即使设了 position-sticky 也不会粘住。
- 常见场景：表格头
<thead>里用position-sticky，结果不生效 → 给<table>加overflow-x: auto或把表封装进带overflow-y: auto的<div> - 在
display: flex的父容器中，sticky 子项需满足：父容器有确定高度 + 设置overflow: hidden/scroll/auto - iOS Safari 对 sticky 支持较弱，特别是嵌套 scroll 容器中，上线前务必真机验证
position-* 类就能搞定。最容易被忽略的是：没有检查 computed styles 确认最终生效的 position 和 offset 值，而是凭 class 名字“以为”它该在哪。 
