ارزش های مشترک
کلاس های موقعیت یابی سریع در دسترس هستند، اگرچه پاسخگو هستند.
کلاس ها با استفاده از فرمت position-{option}برای xsو position-{breakpoint}-{option}برای sm،،، mdو نامگذاری می lg, xlشوند xxl.
.position-static
.position-relative
.position-absolute
.position-sticky
.fixed-top
.fixed-bottomترتیب عناصر
با ابزارهای موقعیت یابی لبه، عناصر را به راحتی مرتب کنید. این قالب {property}-{position}. دارای کلاس کاربردی ویژه ای است .all-0 که ارتفاع/عرض کامل را به عنصر فرزند عنصر والد می دهد.
.all-0
<div class="position-relative bg-200 mb-4" style="height: 200px;">
<div class="light p-3 bg-900 rounded-1 position-absolute top-0 start-0"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute top-0 end-0"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute top-50 start-50"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute bottom-50 end-50"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute bottom-0 start-0"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute bottom-0 end-0"></div>
</div>
<div class="position-relative light" style="height: 100px; width: 100px">
<div class="bg-900 rounded-1 text-white d-flex flex-center position-absolute all-0">.all-0</div>
</div>عناصر مرکزی
علاوه بر این، میتوانید عناصر را با کلاسهای کاربردی transform .translate-middle،، وسط .translate-middle-x قرار دهید .translate-middle-y. تغییرات پاسخگو نیز برای وجود دارد transform-middle، به عنوان مثال: transform-{xxl|xl|lg|md|sm}-middle-{x|y}.
<div class="position-relative bg-200" style="height: 200px;">
<div class="light p-3 bg-900 rounded-1 position-absolute top-0 start-50 translate-middle-x"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute top-50 start-0 translate-middle-y"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute top-50 start-50 translate-middle"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute top-50 end-0 translate-middle-y"></div>
<div class="light p-3 bg-900 rounded-1 position-absolute bottom-0 start-50 translate-middle-x"></div>
</div>
