Positioning

Position

Each position value is a standalone class.

Class	Compiles to	Positions the element relative to
static	position: static	Nothing. It stays in the normal flow (the default)
relative	position: relative	Its own normal spot
absolute	position: absolute	The nearest positioned ancestor
fixed	position: fixed	The viewport
sticky	position: sticky	Its scroll container, once it reaches the offset you set
initial	position: initial	Resets to the default
inherit	position: inherit	Copies the parent’s position

Offsets

Property	Compiles to	Example
top, right, bottom, left	That side	top:d4
inset	All four sides	inset:d0
inset-inline, inset-inline-start, inset-inline-end	Logical inline sides	inset-inline:d4
inset-block, inset-block-start, inset-block-end	Logical block sides	inset-block-start:d2

All of them take a spacing token or a sizing keyword like 0 or auto. inset also takes two values: inset:d2:d4 sets left and right to d2, top and bottom to d4.

A badge pinned to a card's corner

<div class="relative">
  <span class="absolute top:d2 right:d2">New</span>
</div>

A header that sticks to the top

<header class="sticky top:0 z:10">…</header>

Stacking

Property	Values	Compiles to	Example
z	Any number	z-index	z:10

Float and clear

Property	Values	Compiles to	Example
float	left, right, none, inline-start, inline-end	float	float:inline-start
clear	none, left, right, both, inline-start, inline-end	clear	clear:both

Empty content

::before and ::after only render when they have content. The empty class sets content: '', so a state block can draw a purely decorative pseudo-element.

<span class="relative @after:[empty_absolute_inset:0_bg-color:indigo]">…</span>