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
| Class | Result |
|---|---|
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
| Class | Result |
|---|---|
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!