Jaké jsou možnosti umístění prvků v CSS?

V CSS existuje několik hlavních možností pro umístění prvků:

• static — výchozí pozice. Prvky jsou umístěny v toku dokumentu, bez posunů.
• relative — prvek je umístěn vzhledem ke své normální pozici. Může být posunut pomocí top, left, bottom, right, přičemž si zachovává místo v toku.
• absolute — prvek je umístěn vzhledem k nejbližšímu předkovi s jiným než static pozicováním (nebo vzhledem k oknu, pokud takových není). Prvek je vyjmut z toku.
• fixed — prvek je pevně umístěn vzhledem k oknu prohlížeče a při posouvání se nepohybuje. Také je vyjmut z toku.
• sticky — prvek se chová jako relative, dokud nedosáhne zadané pozice při posouvání, poté jako fixed.

Kromě pozicování se často používají:

• Flexbox — flexibilní model pro zarovnání a rozložení prostoru mezi prvky v jednom rozměru (řádek nebo sloupec).
• Grid — dvourozměrný mřížkový model pro umístění prvků do řádků a sloupců.
• float — zastaralý způsob obalování prvků, dříve používaný pro tvorbu sloupců, nyní méně častý.

Příklad použití position:

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