Use position utilities to quickly style the position of an element. Great for cards, buttons, or any other element.
You can set a position to an element instantly by using the following utilities classes.
| 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. |
You can set a top,right,bottom and left position to an element using the following utilities classes.
| 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) |
You can set a top,right,bottom and left position to an element using the following utilities classes.
| 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) |
You can set a negative positioning to an element using the following utilities classes.
| 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) |
You can set a z-index to an element instantly using the following utilities classes.
| Class | Value |
|---|---|
| .z-index-[value] | 10 | 50 | 100 | 150 | 200 |