📪Position

Positioning Classes

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