Position

Position values

Set the CSS position property on any element. Both shorthand and .pos-{value} forms are generated.

<div class="relative">
  <div class="absolute">Positioned inside relative parent</div>
</div>

<nav class="fixed">Fixed nav</nav>
<header class="sticky">Sticky header</header>

Offset (top / right / bottom / left)

Inset utilities on the spacing scale, matching padding, margin, and gap. Values are rem-based; every class also accepts responsive prefixes such as md:top-6.

<!-- Pin every side -->
<div class="absolute inset-0">Overlay</div>

<!-- Offset a single side -->
<span class="absolute top-15 right-15">12px from the top-right</span>

<!-- Responsive offset -->
<div class="fixed top-3 md:top-6">Floating button</div>

Swap top for right, bottom, or left to offset any single side, and use .inset-{n} to set all four at once. All classes accept responsive prefixes such as md:top-6.

Zero inset shorthands

These classes set the named sides to 0 - useful for pinning an overlay to a corner or edge without writing all four coordinates.

Float

Float utilities and clearfix for legacy float-based layouts.

<div class="clearfix">
  <img class="float-left" src="..." alt="...">
  <p>Text wraps around the floated image.</p>
</div>

Responsive variants. All position values support breakpoint prefixes - e.g. md:absolute, lg:sticky. Inset utilities also support responsive prefixes via breakpoint-from.