Koje su opcije pozicioniranja elemenata u CSS?

U CSS-u postoji nekoliko glavnih opcija za pozicioniranje elemenata:

• static — podrazumevano pozicioniranje. Elementi se nalaze u toku dokumenta, bez pomeranja.
• relative — element je pozicioniran u odnosu na svoju normalnu poziciju. Može se pomeriti pomoću top, left, bottom, right, pri čemu zauzima mesto u toku.
• absolute — element je pozicioniran u odnosu na najbližeg pretka sa pozicijom različitom od static (ili u odnosu na prozor ako takvih nema). Element izlazi iz toka.
• fixed — element je fiksiran u odnosu na prozor pregledača i ne pomera se pri skrolovanju. Takođe izlazi iz toka.
• sticky — element se ponaša kao relative dok ne dostigne zadatu poziciju pri skrolovanju, nakon čega se ponaša kao fixed.

Pored pozicioniranja, za raspoređivanje elemenata često se koriste:

• Flexbox — fleksibilni model za poravnanje i raspodelu prostora između elemenata u jednoj dimenziji (red ili kolona).
• Grid — dvodimenzionalni model mreže za postavljanje elemenata po redovima i kolonama.
• float — zastareli način za obmotavanje elemenata, ranije korišćen za kreiranje kolona, sada ređe.

Primer korišćenja position:

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