Skip to content

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
ClassDescriptionPosition class (1)Full class (2)
pos:rrelative
pos:aabsolute
pos:ssticky
pos:ffixed
pos:staticstatic
Position class (1)
ClassDescription
ttop: 0
lleft: 0
rright: 0
bbottom: 0
Position class (auto)
ClassDescription
t:atop: auto
l:aleft: auto
r:aright: auto
b:abottom: auto
Position class (inherit)
ClassDescription
t:itop: inherit
l:ileft: inherit
r:iright: inherit
b:ibottom: inherit
Full class (2)
ClassDescription
full top: 0;
left: 0;
right: 0;
bottom: 0;

relative

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

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

absolute

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

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

sticky

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

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

fixed

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

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

static

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

Statically Positioned
html
<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
html
<div class="pos:a full">
  Full Position Absolute
</div>

Released under the MIT License