Positioning

Position utilities control the CSS position property and provide offset classes for top and left.

Position Type

Class	Description
.util-position-fixed	Positioned relative to the viewport; stays in place when scrolling
.util-position-absolute	Positioned relative to the nearest positioned ancestor; removed from normal flow
.util-position-relative	Positioned relative to its normal position; creates a positioning context for absolute children
.util-position-static	Default positioning; resets any previously applied position value

Offset Classes

Pattern: .util-position-<side>-<direction>-<size>

Sides

• top
• left

Directions

• pos — positive offset
• neg — negative offset

Sizes

Size	Value
md	1rem
lg	5rem
xl	8rem

Examples

<div class="util-position-relative">
  <div class="util-position-absolute util-position-top-pos-md util-position-left-pos-lg">
    Offset 1rem from top and 5rem from left
  </div>
</div>

Responsive Variants

Offset classes support breakpoint suffixes:

<div class="util-position-top-neg-md util-position-top-pos-lg@md">
  Negative top on small, positive top on medium+
</div>