Position

Position Properties

The following classes are available for controlling the position of elements.

Class	Property
.ds-position-static	position: static
.ds-position-relative	position: relative
.ds-position-fixed	position: fixed
.ds-position-absolute	position: absolute
.ds-position-sticky	position: sticky

Position: Static

The default positioning for HTML elements in the normal document flow.

These elements will not react to offsets based on top, right, bottom, left positions while in this state.

Position: Relative

Elements with .ds-position-relative remain in the normal document flow position.

These elements will respond to offsets on the top, right, bottom, or left.

Position: Fixed

Elements with .ds-position-fixed are positioned relative to the viewport.

Position: Absolute

Elements with .ds-position-absolute are positioned relative to the nearest ancestor with a position other than static. Otherwise, the element will be positioned relative to the document body.

Position: Sticky

Elements with .ds-position-sticky are positioned relative until the user scrolls. Upon scroll, the element will "stick" to the offset position by switching to a fixed position.