Position

Use shorthand position utility classes to quickly change an elements position value.

Notation #

Position utility classes can be defined using the format -position-{viewport}--{value}. Viewports supported are sm, md, lg, and xl.

Target all viewports #

Use to set an elements position on all viewports.

Base #

Static #


Relative #


Fixed #


Absolute #


Sticky #


Additional classes #

Fixed Top #

Use the -position--fixed-top class to position an element at the top of the viewport.


Fixed Bottom #

Use the -position--fixed-bottom class to position an element at the bottom of the viewport.


Target specific viewports #

To target a specific viewport, add the viewport abbreviation to the class. It's important to note that viewport-specific classes apply to their respective viewport and any larger viewport (unless overridden by a larger viewport class).

Static #


Relative #


Fixed #


Absolute #


Sticky #


Fixed Top #


Fixed Bottom #