<

Voyager

Voyager

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