定位类型
| 类名 | 值 | 说明 |
|---|
.position-static | static | 默认定位 |
.position-relative | relative | 相对定位 |
.position-absolute | absolute | 绝对定位 |
.position-fixed | fixed | 固定定位 |
.position-sticky | sticky | 粘性定位 |
<div class="position-relative" style="height:200px">
<div class="position-absolute top-0 start-0">左上角</div>
<div class="position-absolute top-0 end-0">右上角</div>
<div class="position-absolute bottom-0 start-0">左下角</div>
<div class="position-absolute bottom-0 end-0">右下角</div>
<div class="position-absolute top-50 start-50 translate-middle">中心点</div>
</div>
偏移工具
| 类名 | 值 |
|---|
.top-0 / .bottom-0 | 0 |
.start-0 / .end-0 | 0 |
.top-50 / .bottom-50 | 50% |
.start-50 / .end-50 | 50% |
.translate-middle | translate(-50%, -50%) |
.translate-middle-x | translateX(-50%) |
.translate-middle-y | translateY(-50%) |
粘性定位
.sticky-top 将元素固定在视口顶部，是 position: sticky; top: 0; 的简写：
<nav class="sticky-top">滚动时固定在顶部</nav>
<div class="sticky-sm-top">小屏及以上固定</div>
<div class="sticky-md-top">中屏及以上固定</div>
<div class="sticky-lg-top">大屏及以上固定</div>
<div class="sticky-xl-top">超大屏固定</div>
<div class="sticky-xxl-top">超超大屏固定</div>
固定底部
<div class="fixed-bottom bg-dark text-white p-3 text-center">固定在底部的栏</div>
.fixed-bottom 会覆盖页面底部内容，使用时应为被覆盖的元素添加适当的内边距。