📪Position

.absolute

Sets the position property to absolute, positioning the element relative to its nearest positioned ancestor.

CSS equivalent: position: absolute;

Example usage:

<div class="absolute">
  <!-- Content positioned absolutely -->
</div>

---

.relative

Sets the position property to relative, positioning the element relative to its normal position.

CSS equivalent: position: relative;

Example usage:

<div class="relative">
  <!-- Content positioned relatively -->
</div>

---

.fixed

Sets the position property to fixed, positioning the element relative to the viewport.

CSS equivalent: position: fixed;

Example usage:

<div class="fixed">
  <!-- Content positioned fixed -->
</div>

---

.static

Sets the position property to static, placing the element in its default position according to the normal flow of the document.

CSS equivalent: position: static;

Example usage:

<div class="static">
  <!-- Content with static position -->
</div>

---

.sticky

Sets the position property to sticky, positioning the element based on the user's scroll position, but behaves like relative until it reaches a specified threshold.

CSS equivalent: position: sticky;

Example usage:

<div class="sticky">
  <!-- Content with sticky position -->
</div>

---

These utility classes provide different positioning options for elements, allowing you to control their placement within the document layout.