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>