Care sunt opțiunile de poziționare a elementelor în CSS?

Există mai multe opțiuni principale pentru poziționarea elementelor în CSS:

• static — poziționare implicită. Elementele sunt plasate în fluxul documentului, fără deplasări.
• relative — elementul este poziționat relativ la poziția sa normală. Poate fi deplasat folosind top, left, bottom, right, păstrându-și locul în flux.
• absolute — elementul este poziționat față de cel mai apropiat părinte cu o poziție diferită de static (sau față de fereastră dacă nu există). Elementul iese din flux.
• fixed — elementul este fixat față de fereastra browserului și nu se mișcă la derulare. De asemenea, iese din flux.
• sticky — elementul se comportă ca relative până atinge o poziție specificată în timpul derulării, apoi ca fixed.

Pe lângă poziționare, pentru aranjarea elementelor se folosesc frecvent:

• Flexbox — model flexibil pentru alinierea și distribuirea spațiului între elemente într-o singură dimensiune (linie sau coloană).
• Grid — model de grilă bidimensional pentru plasarea elementelor în rânduri și coloane.
• float — metodă învechită pentru înfășurarea elementelor, folosită anterior pentru crearea coloanelor, acum mai rar.

Exemplu de utilizare a poziției:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}