Position

Atomic classes for managing a element's position properties.

Classes

🔗

Class	CSS	Responsiveness
`.ps-static`	`position: static;`	Y
`.ps-relative`	`position: relative;`	Y
`.ps-absolute`	`position: absolute;`	Y
`.ps-fixed`	`position: fixed;`	Y
`.ps-sticky`	`position: sticky;`	Y
`.ps-unset`	`position: unset;`	Y

Examples

🔗

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

.ps-static

.ps-relative .t8 .l8

.ps-absolute .t10 .r8

.ps-sticky .t6

Coordinates

🔗

Class	CSS	Responsiveness
`.t[SU]`	`top: [SU];`	Y
`.r[SU]`	`right: [SU];`	Y
`.b[SU]`	`bottom: [SU];`	Y
`.l[SU]`	`left: [SU];`	Y
`.i[SU]`	`inset: [SU];`	Y
`.tn[SU]`	`top: -[SU];`	Y
`.rn[SU]`	`right: -[SU];`	Y
`.bn[SU]`	`bottom: -[SU];`	Y
`.ln[SU]`	`left: -[SU];`	Y

Coordinate examples

🔗

<div class="ps-absolute i12"></div>
<div class="ps-absolute t3 l3"></div>
<div class="ps-absolute t8 r6"></div>
<div class="ps-absolute b8 l8"></div>
<div class="ps-absolute bn6 rn6"></div>

.i12

.t3 .l3

.t8 .r6

.b8 .l8

.bn7 .rn6

Customization

Override position variables:

$positions: absolute, fixed, relative, static, sticky, unset;