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-muted mb-6 h-50">
<div class="p-4 bg-emphasis rounded-sm absolute top-0 start-0"></div>
<div class="p-4 bg-emphasis rounded-sm absolute top-0 end-0"></div>
<div class="p-4 bg-emphasis rounded-sm absolute top-1/2 start-1/2"></div>
<div class="p-4 bg-emphasis rounded-sm absolute bottom-1/2 end-1/2"></div>
<div class="p-4 bg-emphasis rounded-sm absolute bottom-0 start-0"></div>
<div class="p-4 bg-emphasis 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-muted h-50">
<div class="p-4 bg-emphasis rounded-sm absolute top-0 left-1/2 -translate-x-1/2"></div>
<div class="p-4 bg-emphasis rounded-sm absolute top-1/2 start-0 -translate-y-1/2"></div>
<div class="p-4 bg-emphasis rounded-sm absolute top-1/2 left-1/2 -translate-1/2"></div>
<div class="p-4 bg-emphasis rounded-sm absolute top-1/2 end-0 -translate-y-1/2"></div>
<div class="p-4 bg-emphasis rounded-sm absolute bottom-0 left-1/2 -translate-x-1/2"></div>
</div>
