Position

The position utility allows you to set the CSS positioning method of an element, such as relative, absolute, or fixed. It supports both static and responsive variants generated through mixins and loops.

---

Naming convention

All classes follow the structure:

.u--position-{value}
.u--position-{breakpoint}-{value}

---

When to use

Use this utility when:

• You want to apply a positioning method
• You need to switch position styles across breakpoints (e.g., absolute on desktop, relative on mobile)
• You’re building layouts with overlays, sticky elements, or controlled stacking

---

Responsive variants

This utility supports responsive variants, using breakpoint prefixes like: desktop, laptop, tabletl, tabletm, tablets, mobile.

---

How to use

In HTML

<div class="u--position-relative u--position-tabletl-absolute">
  ...
</div>

In CSS

.c--card-a {
  @extend .u--position-relative;
  @extend .u--position-tabletl-absolute;
}