Position
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
<div class="-position--static"></div>
Relative
<div class="-position--relative"></div>
Fixed
<div class="-position--fixed"></div>
Absolute
<div class="-position--absolute"></div>
Sticky
<div class="-position--sticky"></div>
Additional classes
Fixed Top
Use the -position--fixed-top
class to position an element at the top of the viewport.
<div class="-position--fixed-top"></div>
Fixed Bottom
Use the -position--fixed-bottom
class to position an element at the bottom of the viewport.
<div class="-position--fixed-bottom"></div>
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
<div class="-position-sm--static"></div>
<div class="-position-md--static"></div>
<div class="-position-lg--static"></div>
<div class="-position-xl--static"></div>
Relative
<div class="-position-sm--relative"></div>
<div class="-position-md--relative"></div>
<div class="-position-lg--relative"></div>
<div class="-position-xl--relative"></div>
Fixed
<div class="-position-sm--fixed"></div>
<div class="-position-md--fixed"></div>
<div class="-position-lg--fixed"></div>
<div class="-position-xl--fixed"></div>
Absolute
<div class="-position-sm--absolute"></div>
<div class="-position-md--absolute"></div>
<div class="-position-lg--absolute"></div>
<div class="-position-xl--absolute"></div>
Sticky
<div class="-position-sm--sticky"></div>
<div class="-position-md--sticky"></div>
<div class="-position-lg--sticky"></div>
<div class="-position-xl--sticky"></div>
Fixed Top
<div class="-position-sm--fixed-top"></div>
<div class="-position-md--fixed-top"></div>
<div class="-position-lg--fixed-top"></div>
<div class="-position-xl--fixed-top"></div>
Fixed Bottom
<div class="-position-sm--fixed-bottom"></div>
<div class="-position-md--fixed-bottom"></div>
<div class="-position-lg--fixed-bottom"></div>
<div class="-position-xl--fixed-bottom"></div>