Positioning

Position

To postion an element absolutely, set pos-rel on the parent element and pos-abs to child that you’d like to position absolute. Our position utilities are meant to be used (mostly) with pinning.

Class

ClassResult
pos-rel

Position relative to the elements normal position.

pos-abs

Position an element absolutely.

pos-fix

Set the fixed position of an element.

pos-stick

Make it sticky. For use with table headers.

Pin

Class

ClassResult
pin-{ top, bottom, left, right }

In combination with position utilities, pin an element top, bottom, left, right.

pin-center

Position element in the middle of a container on both X and Y axis.

pin-center-top

Position element in the middle of a container on the Y axis.

pin-center-bottom

Position element in the middle of a container on the Y axis.

pin-center-left

Position element in the middle of a container on the X axis.

pin-center-right

Position element in the middle of a container on the X axis.

Visualizer

Try this!Pin an element to different sides of its container!