Position
An element's position can be quickly configured by using Position classes.
| Class | Scss Define | Translated CSS |
|---|---|---|
u-position-relative
|
position: relative!important;
|
Stays the same |
u-position-absolute
|
position: absolute!important;
|
Stays the same |
u-position-fixed
|
position: fixed!important;
|
Stays the same |
u-position-static
|
position: static!important;
|
Stays the same |
u-inset-0
|
inset: 0!important;
|
Stays the same |
u-inset-inline-0
|
inset-inline: 0!important;
|
Stays the same |
u-inset-inline-start-0
|
inset-inline-start: 0!important;
|
Stays the same |
u-inset-inline-start-1
|
inset-inline-start: pxToRem(1)!important;
|
inset-inline-start: 0.0625rem!important;
|
u-inset-inline-start-4
|
inset-inline-start: pxToRem(4)!important;
|
inset-inline-start: 0.25rem!important;
|
u-inset-inline-start-8
|
inset-inline-start: pxToRem(8)!important;
|
inset-inline-start: 0.5rem!important;
|
u-inset-inline-start-12
|
inset-inline-start: pxToRem(12)!important;
|
inset-inline-start: 0.75rem!important;
|
u-inset-inline-start-16
|
inset-inline-start: pxToRem(16)!important;
|
inset-inline-start: 1rem!important;
|
u-inset-inline-end-0
|
inset-inline-end: 0!important;
|
Stays the same |
u-inset-inline-end-1
|
inset-inline-end: pxToRem(1)!important;
|
inset-inline-end: 0.0625rem!important;
|
u-inset-inline-end-4
|
inset-inline-end: pxToRem(4)!important;
|
inset-inline-end: 0.25rem!important;
|
u-inset-inline-end-8
|
inset-inline-end: pxToRem(8)!important;
|
inset-inline-end: 0.5rem!important;
|
u-inset-inline-end-12
|
inset-inline-end: pxToRem(12)!important;
|
inset-inline-end: 0.75rem!important;
|
u-inset-inline-end-16
|
inset-inline-end: pxToRem(16)!important;
|
inset-inline-end: 1rem!important;
|
u-inset-block-start-0
|
inset-block-start: 0!important;
|
Stays the same |
u-inset-block-start-1
|
inset-block-start: pxToRem(1)!important;
|
inset-block-start: 0.0625rem!important;
|
u-inset-block-start-4
|
inset-block-start: pxToRem(4)!important;
|
inset-block-start: 0.25rem!important;
|
u-inset-block-start-8
|
inset-block-start: pxToRem(8)!important;
|
inset-block-start: 0.5rem!important;
|
u-inset-block-start-12
|
inset-block-start: pxToRem(12)!important;
|
inset-block-start: 0.75rem!important;
|
u-inset-block-start-16
|
inset-block-start: pxToRem(16)!important;
|
inset-block-start: 1rem!important;
|
u-inset-block-end-0
|
inset-block-end: 0!important;
|
Stays the same |
u-inset-block-end-1
|
inset-block-end: pxToRem(1)!important;
|
inset-block-end: 0.0625rem!important;
|
u-inset-block-end-4
|
inset-block-end: pxToRem(4)!important;
|
inset-block-end: 0.25rem!important;
|
u-inset-block-end-8
|
inset-block-end: pxToRem(8)!important;
|
inset-block-end: 0.5rem!important;
|
u-inset-block-end-12
|
inset-block-end: pxToRem(12)!important;
|
inset-block-end: 0.75rem!important;
|
u-inset-block-end-16
|
inset-block-end: pxToRem(16)!important;
|
inset-block-end: 1rem!important;
|
Z-index Classes
| Class | styles |
|---|---|
u-z-index-0
|
z-index: 0!important;
|
u-z-index-1
|
z-index: 1!important;
|
u-z-index-5
|
z-index: 5!important;
|
u-z-index-10
|
z-index: 10!important;
|
u-z-index-15
|
z-index: 15!important;
|
u-z-index-20
|
z-index: 20!important;
|
Position Sticky
Position sticky can take 4 direction variables
| Class | styles | Default Direction |
|---|---|---|
u-position-sticky
|
position: sticky;
|
|
--inset-block-start: auto;
|
top | |
--inset-block-end: auto;
|
bottom | |
--inset-inline-start: auto;
|
left | |
--inset-inline-end: auto;
|
right |
For using you can attach direction via inline style which will define the local variables. Example:
<section class="u-position-sticky" style="--inset-block-start:3rem;">
<p class="text u-margin-block-start-8">
Position Sticky element with sticky top direction of 24px
</p>
</section>