Setting a Position

You can set a position to an element instantly by using the following utilities classes.

Class Reference

Class	Value
.pos-relative	Set a relative position to an element.
.pos-absolute	Set an absolute position to an element.
.pos-fixed	Set a fixed position to an element.
.pos-static	Set a static position to an element.

Top, Right, Bottom & Left Positioning

You can set a top,right,bottom and left position to an element using the following utilities classes.

Sample Code

<div class="pos-absolute t-20 r-0"></div>

Class Reference

Class	Value
.t-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.r-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.b-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.l-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)

X and Y Positioning

You can set a top and bottom (y) and left and right (x) or even all (a) position to an element using the following utilities classes.

Class Reference

Class	Value
.x-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.y-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.a-[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)

Negative Positioning

You can set a negative positioning to an element using the following utilities classes.

Class Reference

Class	Value
.t--[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.r--[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.b--[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)
.l--[value]	0 | 5 | 10 | 15 | ... | 100 (step of 5)

Z-Index Positioning

You can set a z-index to an element instantly using the following utilities classes.

Class Reference

Class	Value
.z-index-[value]	10 | 50 | 100 | 150 | 200