Position

The position utility classes help manage the positioning of an element. These classes allow you to control the position properties easily.

CSS Classes

		Support
Class	Description	Position class (1)	Full class (2)
pos:r	relative	✅	❌
pos:a	absolute	✅	✅
pos:s	sticky	✅	❌
pos:f	fixed	✅	✅
pos:static	static	❌	❌

Position class (1)
Class	Description
t	top: 0
l	left: 0
r	right: 0
b	bottom: 0

Position class (auto)
Class	Description
t:a	top: auto
l:a	left: auto
r:a	right: auto
b:a	bottom: auto

Position class (inherit)
Class	Description
t:i	top: inherit
l:i	left: inherit
r:i	right: inherit
b:i	bottom: inherit

Full class (2)
Class	Description
full	top: 0; left: 0; right: 0; bottom: 0;

relative

The pos:r class sets the position property to relative.

Relatively Positioned

<div class="pos:r">
  Relatively Positioned
</div>

absolute

The pos:a class sets the position property to absolute.

Absolutely Positioned

<div class="pos:a">
  Absolutely Positioned
</div>

sticky

The pos:s class sets the position property to sticky.

Sticky Position

<div class="pos:s">
  Sticky Position
</div>

fixed

The pos:f class sets the position property to fixed.

<div class="pos:f">
  Fixed Position
</div>

static

The pos:static class sets the position property to static.

Statically Positioned

<div class="pos:static">
  Statically Positioned
</div>

full

The full class sets the position to cover the entire container for absolutely or fixed positioned elements.

Full Position Absolute

<div class="pos:a full">
  Full Position Absolute
</div>