Poziționarea în CSS

Poziționarea este o tehnică esențială în CSS care îți permite să controlezi unde apar elementele pe pagină. Spre deosebire de fluxul normal al documentului, unde elementele se așază unul sub altul, poziționarea îți oferă libertatea de a muta, fixa sau suprapune elemente exact unde ai nevoie. Este extrem de utilă pentru layouturi personalizate, tooltips, bannere, meniuri, notificări și multe altele.

Tipuri de poziționare

CSS oferă cinci tipuri principale de poziționare, fiecare cu comportamente diferite. Hai să le explicăm pe rând:

static - este valoarea implicită. Elementele cu position: static nu pot fi mutate cu top, left, right sau bottom. Ele urmează fluxul normal al paginii, exact cum sunt scrise în HTML.
relative - elementul rămâne în fluxul normal, dar poate fi mutat față de poziția sa inițială. Este ca și cum ai „împinge” elementul puțin în sus, jos, stânga sau dreapta, fără să afecteze celelalte elemente.
absolute - elementul este scos complet din fluxul documentului și se poziționează față de cel mai apropiat părinte care are position: relative sau alt tip de poziționare. Dacă nu există un astfel de părinte, se va poziționa față de <html>.
fixed - elementul este fixat față de fereastra browserului. Nu se mișcă atunci când utilizatorul derulează pagina. Este ideal pentru bannere, butoane „scroll to top” sau notificări persistente.
sticky - este un hibrid între relative și fixed. Elementul se comportă normal până când ajunge într-un punct specific (de obicei top), apoi „se lipește” și rămâne vizibil în acel loc pe măsură ce utilizatorul derulează.

Exemplu: poziționare relative

În acest exemplu, elementul este mutat 20px în jos și 30px spre dreapta față de poziția sa inițială. Observă că spațiul ocupat de el în pagină rămâne același.

🔧 Exemplu live: poziționare relative

<div class="box">Box relativ</div>

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background: lightblue;
  padding: 1rem;
  width: 200px;
  text-align: center;
}

Exemplu: poziționare absolute într-un container relative

Aici avem un container albastru cu position: relative. Elementul roșu din interior are position: absolute și se poziționează față de colțul dreapta-sus al containerului. Dacă nu am fi pus relative pe container, badge-ul s-ar fi poziționat față de întreaga pagină.

🔧 Exemplu live: poziționare absolute

<div class="container">
  <div class="badge"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: lightblue;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: crimson;
}

Exemplu: poziționare fixed

Bannerul de mai jos este fixat în partea de jos a ecranului. Chiar dacă derulezi pagina, el rămâne vizibil. Este o tehnică des folosită pentru notificări, bare de navigație sau butoane de acțiune.

🔧 Exemplu live: poziționare fixed

<div class="banner">Banner fix jos</div>

.banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: white;
  text-align: center;
  padding: 1rem;
}

Exemplu: poziționare sticky

Headerul de mai jos se comportă normal până când ajunge în partea de sus a viewportului. Apoi se „lipește” și rămâne acolo în timp ce derulezi. Este ideal pentru titluri de secțiuni sau meniuri care trebuie să rămână vizibile.

🔧 Exemplu live: poziționare sticky

<div class="header">Header sticky</div>
<div class="content">Conținut lung pentru scroll...</div>

.header {
  position: sticky;
  top: 0;
  background: #333;
  color: white;
  padding: 1rem;
}

.content {
  height: 1000px;
  background: #eee;
}

Bune practici

Folosește position: relative pe părinte atunci când vrei ca un copil cu absolute să se poziționeze față de acel părinte.
Nu abuza de z-index. Folosește-l doar când ai nevoie să controlezi suprapunerile. Valori mari pot crea conflicte greu de gestionat.
sticky funcționează doar dacă elementul are un context de scroll și nu este afectat de overflow: hidden pe părinte.
Testează poziționarea pe diferite rezoluții și dispozitive. Ce funcționează pe desktop poate fi deranjant pe mobil.

💡 Sfat: Poziționarea este un instrument puternic, dar trebuie folosit cu grijă. Nu înlocuiește layouturile moderne precum Flex și Grid, ci le completează în situații punctuale — cum ar fi badge-uri, tooltips, bannere sau elemente flotante.

🧠 Quiz - Poziționarea în CSS

Pseudo-clase ➔