Positions

Position utilities control position and inset offsets using design-system spacing tokens.

Position Types

Class	Description
.ro-u-pos-relative	position: relative
.ro-u-pos-absolute	position: absolute

Inset Offsets

Offset classes follow the pattern .ro-u-{direction}-{size} where direction is top, right, bottom, or left, and size is 0–6 (maps to var(--ro-size-N)).

<div class="ro-u-pos-relative ro-demo-box-outline ro-u-p-8">
<span class="ro-u-pos-absolute ro-u-top-2 ro-u-right-2 ro-badge ro-size-xs ro-color-scheme-product">New</span>
<div class="ro-demo-box">Relative container</div>
</div>

Preview

New

Relative container

Available Offsets

For each direction (top, right, bottom, left):

ro-u-{dir}-0, ro-u-{dir}-1, ro-u-{dir}-2, ro-u-{dir}-3, ro-u-{dir}-4, ro-u-{dir}-5, ro-u-{dir}-6

Example combinations:

<div class="ro-u-pos-absolute ro-u-bottom-0 ro-u-left-0">Bottom-left</div>
<div class="ro-u-pos-absolute ro-u-top-0 ro-u-left-0">Top-left</div>

Pair with Stack Layout or a relatively positioned parent for overlay placement.