Positioning

Positioning

Position utilities place elements using the CSS position property and the inset offsets.

Position values

Only relative, absolute, fixed, and sticky act as reference points for absolutely positioned children. static ignores offsets.

Inset utilities

Position an element with top, right, bottom, left, and inset:

<div class="relative">
  <div class="absolute inset-0">...</div>   <!-- fills the parent -->
  <div class="absolute top-0 right-0">...</div>
  <div class="absolute -left-4 top-1/2">...</div>
</div>

• inset-<n> - all sides
• inset-x-<n> - left and right
• inset-y-<n> - top and bottom
• top-<n>, right-<n>, bottom-<n>, left-<n> - single sides

Values include the spacing scale, fractions (top-1/2), px, full (100%), and auto. All are available in negative form like -top-4.

Centering an overlay

absolute inset-0 fills the parent; combine with m-auto or flex to center content.

Sticky

sticky behaves like relative until it scrolls to a threshold, then fixes:

<div class="sticky top-0">...</div>

TL;DR

• relative, absolute, fixed, sticky, static.
• inset-0 fills the parent; use top-4 etc. for offsets.
• Negative values: -left-4.
• sticky top-0 pins an element while scrolling.