Positioning

Atomic positioning classes allow you to quickly change an element’s position.

Classes

Class Output Definition Responsive?
.ps-absolute position: absolute;

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.

Examples

<div class="ps-static"></div>
<div class="ps-relative"></div>
<div class="ps-absolute"></div>
<div class="ps-sticky"></div>
<div class="ps-fixed"></div>
<div class="ps-unset"></div>
.ps-static
.ps-relative

.t32
r24
.ps-absolute

.t48
.r32
.ps-sticky

.t64

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 achieve absolutely-positioned layouts while adhering to Stacks’ spacing conventions.

Coordinate classes

Abbreviation Definition
t top
r right
b bottom
l left
tn negative top
rn negative right
bn negative bottom
ln negative left
0 0;
2 2px;
4 4px;
6 6px;
8 8px;
12 12px;
16 16px;
24 24px;
32 32px;
48 48px;
64 64px;
96 96px;
128 128px;
50 50%;
100 100%;

Coordinate examples

<div class="ps-absolute t12 l12"></div>
<div class="ps-absolute t48 r24"></div>
<div class="ps-absolute t64 l64"></div>
<div class="ps-absolute bn8 rn8"></div>
.t12 .l12
.t48 .r24
.t50 .l50
.t64 .l64
.rn8 .bn8

Positive coordinates

Prefix 0 2px 4px 6px 8px 12px 16px 24px 32px 48px 64px 96px 128px 50% 100%
t .t0 .t2 .t4 .t6 .t8 .t12 .t16 .t24 .t32 .t48 .t64 .t96 .t128 .t50 .t100
r .r0 .r2 .r4 .r6 .r8 .r12 .r16 .r24 .r32 .r48 .r64 .r96 .r128 .r50 .r100
l .l0 .l2 .l4 .l6 .l8 .l12 .l16 .l24 .l32 .l48 .l64 .l96 .l128 .l50 .l100
b .b0 .b2 .b4 .b6 .b8 .b12 .b16 .b24 .b32 .b48 .b64 .b96 .b128 .b50 .b100

Negative coordinates

Prefix -2px -4px -6px -8px -12px -16px -24px -32px -48px -64px -96px -128px -50% -100%
tn .tn2 .tn4 .tn6 .tn8 .tn12 .tn16 .tn24 .tn32 .tn48 .tn64 .tn96 .tn128 .tn50 .tn100
rn .rn2 .rn4 .rn6 .rn8 .rn12 .rn16 .rn24 .rn32 .rn48 .rn64 .rn96 .rn128 .rn50 .rn100
ln .ln2 .ln4 .ln6 .ln8 .ln12 .ln16 .ln24 .ln32 .ln48 .ln64 .ln96 .ln128 .ln50 .ln100
bn .bn2 .bn4 .bn6 .bn8 .bn12 .bn16 .bn24 .bn32 .bn48 .bn64 .bn96 .bn128 .bn50 .bn100