Sections

Positioning

Classes

Absolutely positions an element. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don't have a z-index assigned.

.ps-fixed

position: fixed;

Fixes an element within the viewport. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Fixing an element's position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.

.ps-relative

position: relative;

Relatively positions an element in relation to elements around it. The top and bottom properties specify the vertical offset from its normal position. In the same way the left and right properties specify the horizontal offset.

.ps-static

position: static;

An element is positioned according to the document's flow. The top, right, bottom, left, and z-index properties have no effect.

This is the default value.

.ps-sticky

position: sticky;

An element is positioned according to the document's flow, and then offset relative to its flow root and containing block. This creates a new stacking context.

Notes:Sticky elements, by design, will not work inside an element with overflow:hidden; or overflow:auto; values.

Coordinates

Our spacing units aren’t limited to margin and padding; they also apply to top, right, left, and bottom declarations. Combined with our position utility classes, you should be able to acheive absolutely-positioned layouts while adhering to Stacks’ spacing conventions.