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-position-fixed position: fixed; Stays the same
u-position-static position: static !important; Stays the same
u-inset-0 inset: 0; Stays the same
u-inset-inline-0 inset-inline: 0; Stays the same
u-inset-inline-start-0 inset-inline-start: 0; Stays the same
u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem;
u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem;
u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem;
u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem;
u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem;
u-inset-inline-end-0 inset-inline-end: 0; Stays the same
u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem;
u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem;
u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem;
u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem;
u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem;
u-inset-block-start-0 inset-block-start: 0; Stays the same
u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem;
u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem;
u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem;
u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem;
u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem;
u-inset-block-end-0 inset-block-end: 0; Stays the same
u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem;
u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem;
u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem;
u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem;
u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem;

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>