Position
These utility classes are used to help position elements relative to other elements and outside of the typical document flow.
The following utilities are available as quick positioning classes. There are not responsive variants of these utilities.
HTML
.position-relative
.position-absolute
.position-sticky-top
.position-sticky-left
.position-fixed
Sticky positioning
Make an element stick to the edge of a container or viewport after scrolling past it. Sticky position utilities are offered for the top and left sides. The default distance from the edge is 0px
, but can be overridden by setting the custom property, --sticky-top-distance
and --sticky-left-distance
, on the element.
Directional positioning
Direction related classes use logical properties instead of physical properties for better multi-language support. Class .left-0
will actually use inset-inline-start: 0
.
HTML
.top-0
.right-0
.left-0
.bottom-0