position-absolute 本身不带偏移，必须配合 top、end 等方位类才生效；需父容器设 position-relative 提供定位上下文；搭配 translate-middle 可实现角标居中；与 sticky-top 配合时用 top-100 挂载其下方。
position-absolute 本身不带偏移，必须配方位类才生效
position-absolute 只是把元素的 position 设为 absolute，它不会自动加 top、right 等偏移值。常见现象是：加了 position-absolute 后元素“消失”或“跑到左上角”，其实是它相对于最近非 static 祖先定位，但所有偏移量都是默认 auto（即无偏移）。
要真正定位，必须手动加上方位类，比如：
-
top-0、top-50、top-100（单位是 rem，不是 px） -
start-0、start-1、start-100（替代旧版left，支持 RTL） -
end-0、end-50（替代right） -
bottom-0等
父容器必须有定位上下文，否则会相对 body 定位
绝对定位元素会找最近的「已定位祖先」——也就是 position 值为 relative、absolute、fixed 或 sticky 的父级。如果没找到，就退到 <body>。
所以多数场景下，你需要给直接父容器加 position-relative：
<div class="position-relative"> <div class="position-absolute top-0 end-0 translate-middle">红点</div> </div>
漏掉 position-relative 是红点飘走、下拉菜单错位、悬浮图标跑出按钮范围的最常见原因。
搭配 translate-middle 实现精准角标居中
单纯用 top-0 end-0 会让元素左上角顶到右上角，视觉上偏右偏下。加 translate-middle 能自动向反方向平移自身宽高的一半，实现“锚点居中”效果。
典型组合（如通知红点）：
position-absolute-
top-0+end-0（贴右上角） -
translate-middle（让红点中心对齐右上角） -
badge bg-danger（视觉样式）
注意：translate-middle 默认作用于 top 和 start，若只用 end 或 bottom，建议显式写 translate-middle-x 或 translate-middle-y 避免歧义。
和 sticky-top / position-sticky 搭配时，top: 100% 才能“挂”在下方
粘性导航栏（sticky-top 或 position-sticky）本身已是定位上下文。想让一个元素“挂在它正下方”，不要用 margin-top 或 top: 60px（高度难适配），而要用：
- 子元素加
position-absolute+top: 100%（Bootstrap 类是top-100） - 确保父导航栏没有
overflow: hidden（否则挂载元素被裁掉） - 如果需要水平居中，再加
start-50+translate-middle-x
这个技巧在聊天触发器、快捷操作条等场景很稳，滚动时始终紧贴导航栏底边，且不占文档流空间。
