Position
An element's position can be quickly configured by using Position classes.
| Class | Scss Define | Translated CSS |
|---|---|---|
u-position-relative
|
position: relative;
|
Stays the same |
u-position-absolute
|
position: absolute;
|
Stays the same |
u-inset-inline-start-8
|
inset-inline-start: pxToRem(8);
|
inset-inline-start: 0.5rem;
|
u-inset-inline-end-8
|
inset-inline-end: pxToRem(8);
|
inset-inline-end: 0.5rem;
|
u-inset-block-start-8
|
inset-block-start: pxToRem(8);
|
inset-block-start: 0.5rem;
|
u-inset-block-end-8
|
inset-block-end: pxToRem(8);
|
inset-block-end: 0.5rem;
|
Z-index Classes
| Class | styles |
|---|---|
u-z-index-0
|
z-index: 0
|
u-z-index-1
|
z-index: 1
|
u-z-index-5
|
z-index: 5
|
u-z-index-10
|
z-index: 10
|
u-z-index-15
|
z-index: 15
|
u-z-index-20
|
z-index: 20
|
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>