dexblog.ro
CSS Toate proprietățile CSS

position (relative, absolute, fixed, sticky) în CSS

Display și Poziționare CSS2+

Definește metoda de poziționare a elementului pe ecran, permițând mutarea lui cu top, right, bottom, left.

Sintaxă CSS 
position: static;   /* implicit, în fluxul normal */
position: relative; /* deplasare relativă fără a părăsi fluxul */
position: absolute; /* scos din flux, raportat la cel mai apropiat părinte poziționat */
position: fixed;    /* lipit de fereastra ecranului, nu se mișcă la scroll */
position: sticky;   /* se mișcă normal, apoi îngheață la o anumită poziție la scroll */

Ce face position (relative, absolute, fixed, sticky)

Proprietatea position scoate elementele din fluxul normal al documentului sau le oferă un sistem de coordonate.

• relative: elementul rămâne în flux, dar poate fi deplasat cu top/left; cel mai des este folosit ca punct de ancorare pentru copiii săi cu position: absolute.
• absolute: iese complet din fluxul paginii și se poziționează milimetric în raport cu cel mai apropiat părinte care are position: relative (sau absolute/fixed).
• fixed: rămâne fixat pe ecran în același loc indiferent cât derulezi pagina (ideal pentru bare de navigație sau butoane de chat).
• sticky: hibrid între relative și fixed: derulează normal până atinge o limită (ex. top: 0), apoi se lipește de ecran.

Valori uzuale

Valoare Descriere
static Implicit: urmează fluxul normal al paginii; top/left nu au efect.
relative Poziționat relativ la locul său inițial; devine punct de reper pentru copiii absoluți.
absolute Poziționat la coordonate fixe față de primul părinte poziționat.
fixed Poziționat raportat la fereastra browserului (viewport).
sticky Se lipește de ecran când atinge coordonata specificată la scroll.

Exemple

Exemplul 1: Insignă (badge) poziționată absolut peste un card relativ

Părintele are position: relative, iar insigna are position: absolute.

.card-produs {
  position: relative;
  padding: 24px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.insigna-nou {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e34f26;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

Efect vizual în browser

Insigna portocalie „NOU” stă fixată în colțul din dreapta-sus al cardului, exact la 12px de margini.

Greșeli frecvente

  • Folosirea position: absolute fără a pune position: relative pe containerul părinte; elementul va zbura până în colțul ferestrei întregi a paginii (body).
  • Folosirea position: sticky fără a specifica cel puțin o proprietate de poziție (cum ar fi top: 0); sticky nu funcționează dacă lipsește coordonata de declanșare.

Comenzi înrudite