Position

Utilities for controlling element's position.

Position

Use position-{property} utitlies to position element in the document.

Class	Properties
`position-static`	postion: static;
`position-fixed`	postion: fixed;
`position-relative`	postion: relative;
`position-absolute`	postion: absolute;
`position-sticky`	postion: sticky;

position-relative position-absolute

<div class="position-relative bg-secondary--xlight p-4 height-10">
	<span class="position-absolute top-0 right-0">position-absolute</span>
</div>

Placement

Use the {top|right|bottom|left|inset|inset-x|inset-y}-{size} utilities to position the element.

Scale	Value
`px`	1px
`0`	0
`0.5`	0.125rem - 2px
`1`	0.25rem - 4px
`2`	0.5rem - 8px
`3`	0.75rem - 12px
`4`	1rem - 16px
`50`	50%;
`100`	100%;
`unset`	unset;

1 2 3 4

<div class="position-relative bg-secondary--xlight p-4 height-10">
	<span class="position-absolute top-0 left-0">1</span>
	<span class="position-absolute top-0 right-0">2</span>
	<span class="position-absolute bottom-0 left-0">3</span>
	<span class="position-absolute bottom-0 right-0">4</span>
</div>

Negative Value

Add a dash -{top|right|bottom|left|inset}-{size} to use negative value.

<div class="position-relative bg-secondary--xlight p-4 width-6 height-6">
	<span class="position-absolute -top-4 -right-4"></span>
</div>

Translate

Use translate to center elements.

Class	Properties
`translate`	transform: translate(-50%, -50%);
`translate-x`	transform: translateX(-50%);
`translate-y`	transform: translateY(-50%);

<div class="position-relative bg-secondary--xlight p-4 width-6 height-6">
	<span class="position-absolute translate-middle top-50 left-50"></span>
</div>

Resposive Position Utilities

Use position-{breakpoint}-{property} for responsive position utility like position-sm-relative.

Use top-{breakpoint}-{property} for responsive variants like top-md-1, top-sm-2.

<div class="position-relative bg-secondary--xlight p-4 width-6 height-68">
	<span class="position-absolute translate-middle top-50 left-50 top-md-0 left-md-0"></span>
</div>

SASS

Extending Position Scale

You can add your own position scale values by extending $position-values map in your own scss.

// src/scss/utilities/_position.scss.scss

$position-values: (
	"px": 1px,
	"0": 0,
	"0\\.5": 0.125rem,
	"1": 0.25rem,
	"2": 0.5rem,
	"3": 0.75rem,
	"4": 1rem,
	"50": 50%,
	"100": 100%,
	"unset": unset,
);