📌 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

.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 usage

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

✅ How to use

You can apply them directly in HTML:

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

Or extend them in SCSS if you have a custom class:

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