Właściwość CSS position określa sposób pozycjonowania elementu na stronie. W zależności od wybranej wartości, element może być pozycjonowany na różne sposoby. Oto lista właściwości CSS position:

  1. static: domyślna wartość. Element jest pozycjonowany w sposób normalny, zgodnie z jego miejscem w strukturze dokumentu.
  2. relative: element jest pozycjonowany w stosunku do swojej pierwotnej pozycji w przepływie dokumentu. Właściwości top, right, bottom i left określają przesunięcie elementu w pionie i poziomie względem pierwotnej pozycji.
  3. absolute: element jest pozycjonowany w stosunku do najbliższego elementu pozycjonującego, który ma ustawioną wartość position różną od static. Właściwości top, right, bottom i left określają przesunięcie elementu w pionie i poziomie względem elementu pozycjonującego.
  4. fixed: element jest pozycjonowany w stosunku do okna przeglądarki, nawet jeśli strona jest przewijana. Właściwości top, right, bottom i left określają przesunięcie elementu w pionie i poziomie względem górnego, prawego, dolnego i lewego krawędzi okna przeglądarki.

sticky: element jest pozycjonowany w sposób normalny, dopóki nie zostanie przewinięty poza swoją pozycję, a następnie pozostaje widoczny na ekranie, przylegając do określonej pozycji. Właściwości top, right, bottom i left określają odległość, na jakiej element pozostaje przyczepiony do określonej krawędzi ekranu

 

 

Oto przykładowy kod CSS pozycjonujący obrazek:

img {
  position: relative; /* ustawiamy pozycję obrazka na względnie */
  top: 50px; /* przesuwamy obrazek o 50 pikseli w dół */
  left: 20px; /* przesuwamy obrazek o 20 pikseli w prawo */
  width: 300px; /* ustawiamy szerokość obrazka na 300 pikseli */
  height: 200px; /* ustawiamy wysokość obrazka na 200 pikseli */
  border: 1px solid black; /* dodajemy czarną ramkę wokół obrazka */
}