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.
`.ps-unset`	`position: unset;`	Removes previously set `position` value, reverting the element back to the initial browser value.

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

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	Responsive?
t	top
r	right
b	bottom
l	left
i	inset
tn	negative top
rn	negative right
bn	negative bottom
ln	negative left

Coordinate examples

<div class="ps-absolute t12 l12">…</div>
<div class="ps-absolute t48 r24">…</div>
<div class="ps-absolute b48 l48">…</div>
<div class="ps-absolute bn8 rn8">…</div>
<div class="ps-absolute i64">…</div>

.t12 .l12

.t48 .r24

.t50 .l50

.b48 .l48

.rn8 .bn8

.i64

Positive coordinates

Prefix	0	1px	2px	4px	6px	8px	12px	16px	24px	32px	48px	64px	96px	128px	50%	100%
t	`.t0`	`.t1`	`.t2`	`.t4`	`.t6`	`.t8`	`.t12`	`.t16`	`.t24`	`.t32`	`.t48`	`.t64`	`.t96`	`.t128`	`.t50`	`.t100`
r	`.r0`	`.r1`	`.r2`	`.r4`	`.r6`	`.r8`	`.r12`	`.r16`	`.r24`	`.r32`	`.r48`	`.r64`	`.r96`	`.r128`	`.r50`	`.r100`
b	`.b0`	`.b1`	`.b2`	`.b4`	`.b6`	`.b8`	`.b12`	`.b16`	`.b24`	`.b32`	`.b48`	`.b64`	`.b96`	`.b128`	`.b50`	`.b100`
l	`.l0`	`.l1`	`.l2`	`.l4`	`.l6`	`.l8`	`.l12`	`.l16`	`.l24`	`.l32`	`.l48`	`.l64`	`.l96`	`.l128`	`.l50`	`.l100`
i	`.i0`	`.i1`	`.i2`	`.i4`	`.i6`	`.i8`	`.i12`	`.i16`	`.i24`	`.i32`	`.i48`	`.i64`	`.i96`	`.i128`	-	-

Negative coordinates

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

Edit on GitHub