Positioning

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

Classes

Class	Output	Definition
`.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 acheive 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;
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

.t64 .l64

.rn8 .bn8

Positive coordinates

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

Negative coordinates

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