Position
Use these shorthand utilities for quickly configuring the position of an element.
Position on TailwindPosition values
Quick positioning classes are available, though they are not responsive.
.static
.relative
.absolute
.sticky
.fixedArrange Elements
Arrange elements easily with the edge positioning utilities.
<div class="relative bg-body-secondary mb-6 h-50">
<div class="p-4 bg-body-quaternary rounded-sm absolute top-0 start-0"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute top-0 end-0"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute top-1/2 start-1/2"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute bottom-1/2 end-1/2"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute bottom-0 start-0"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute bottom-0 end-0"></div>
</div>Center Elements
In addition, you can also center the elements with the transform utility classes.
<div class="relative bg-body-secondary h-50">
<div class="p-4 bg-body-quaternary rounded-sm absolute top-0 start-1/2 left-1/2 -translate-x-1/2"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute top-1/2 start-0 -translate-y-1/2"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute top-1/2 start-1/2 left-1/2 -translate-1/2"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute top-1/2 end-0 -translate-y-1/2"></div>
<div class="p-4 bg-body-quaternary rounded-sm absolute bottom-0 start-1/2 left-1/2 -translate-x-1/2"></div>
</div>
