Jakie są opcje pozycjonowania elementów w CSS?

W CSS istnieje kilka głównych opcji pozycjonowania elementów:

• static — domyślne pozycjonowanie. Elementy są rozmieszczone w przepływie dokumentu, bez przesunięć.
• relative — element jest pozycjonowany względem swojej normalnej pozycji. Można go przesuwać za pomocą top, left, bottom, right, zachowując miejsce w przepływie.
• absolute — element jest pozycjonowany względem najbliższego przodka z innym niż static pozycjonowaniem (lub względem okna, jeśli takich nie ma). Element jest wyłączony z przepływu.
• fixed — element jest przytwierdzony względem okna przeglądarki i nie przesuwa się podczas przewijania. Również jest wyłączony z przepływu.
• sticky — element zachowuje się jak relative do momentu osiągnięcia określonej pozycji podczas przewijania, potem jak fixed.

Oprócz pozycjonowania, do rozmieszczania elementów często używa się:

• Flexbox — elastyczny model do wyrównywania i rozkładania przestrzeni między elementami w jednym wymiarze (wiersz lub kolumna).
• Grid — dwuwymiarowy model siatki do umieszczania elementów w wierszach i kolumnach.
• float — przestarzała metoda opływania elementów, często używana do tworzenia kolumn, obecnie rzadziej stosowana.

Przykład użycia position:

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