Tailwind naucze sie :)

W Tailwind CSS klasa relative oznacza, że element ma ustawione:

position: relative;

Co to daje w praktyce?

Element nadal jest w normalnym układzie strony
position: relative nie wyjmuje elementu z flow (w przeciwieństwie do absolute).

Możesz go przesuwać za pomocą:

<div class="relative top-2 left-4">


co odpowiada:

top: 0.5rem;
left: 1rem;


Jest punktem odniesienia dla elementów absolute wewnątrz
To jest najczęstsze zastosowanie 👇

<div class="relative">
  <div class="absolute top-0 right-0">
    🔴
  </div>
</div>


👉 Element z absolute będzie pozycjonowany względem tego relative, a nie całej strony.

Porównanie z innymi klasami Tailwinda
Klasa   CSS Znaczenie
static  position: static    domyślne
relative    position: relative  punkt odniesienia
absolute    position: absolute  pozycja względem najbliższego relative
fixed   position: fixed względem okna
sticky  position: sticky    „przyklejony”
Kiedy używać relative?

gdy chcesz pozycjonować elementy wewnątrz (absolute)

gdy potrzebujesz lekko przesunąć element

bardzo często jako „wrapper” dla ikon, badge, tooltipów itp.