CSS position czym się różnią i jak ich używać

laptop desk charts notebook

W CSS właściwość position przyjmuje wartości:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Dzięki tym wartościom możemy ustalać dokładne położenie elementu w pikselach lub innych jednostkach obsługiwanych przez CSS. Jedynie wartość static nie pozwala na pozycjonowanie elementu za pomocą właściwości top, right, bottom i left.

 

Position absolute i relative

Są to dwie wartości których używa się najczęściej podczas realizacji projektów. Nadanie wartości relative pozwala na ustalanie pozycji relatywnie do tego elementu. Co to oznacza? Jeżeli nadamy divowi będącemu parentem (rodzicem) tę wartość to element zagnieżdżony w nim (jego dziecko) będzie mogło określać wartości swoich właściwości względem tego właśnie elementu.

W poniższym przykładzie  w div.relative (divie o klasie relative)  zagnieżdżony jest div.absolute który jest wypozycjonowany względem swojego rodzica (dzięki nadaniu rodzicowi właściwości position: relative). Jego górna prawa krawędź znajduje się 20px od górnej i 20px od lewej krawędzi rodzica (właściwości top: 20px oraz left: 20px).

Position fixed

Z tą wartością bardzo często spotykamy się na różnych stronach w elementach typu newsletter, popup, ikony mediów społecznościowych czy sidebar. Nadanie tej wartości sprawia że element jest wypozycjonowany do viewportu (widocznego obszaru strony w oknie przeglądarki). Oznacza to tyle że podczas przewijania strony w górę i w dół element pozostaje cały czas w jednym miescu (przewijanie strony nie sprawi że zniknie). W poniższym przykładzie widzimy że pomimo iż div.fixed jest zagnieżdżony w div.relative to jego pozycja nie odnosi się do rodzica mimo iż ten posiada właściwość position: relative. Pozycja div.fixed ustalona jest na 30px od górnej i 60px od prawej krawędzi strony. Przewijając przykład div.fixed pozostanie na swoim miejscu podczas gdy jego rodzic zachowuje się „normalnie”.

Position static

Wszystkie elementy html przyjmują domyślnie wartość static. Sprawia to że elementy układają się jeden nad drugim zgodnie z odczytem pliku przez przeglądarkę.

Position sticky

To nowa wartość CSS wspierana jedynie przez najnowsze wersje przeglądarek (nie wszystkich). Pozwala ona na połączenie position: absolute i fixed. Określając pozycję top elementu możemy sprawić że będzie on „przyklejony” przez pewien czas do krawędzi strony (lub w pewnej odległości od niej) dopóki nie przewiniemy strony poza obszar parenta. Poniższy przykład prezentuje tę wartość w działaniu.

Należy pamiętać że wartość ta nie jest wspierana przez wszystkie nowoczesne przeglądarki. Użycie jej w projektach komercyjny póki co powinno ograniczyć sie do sytuacji gdy klientowi nie zależy na pełnym „pokryciu” przeglądarek. Zwłaszcza że taki efekt możemy uzyskać przy odrobiny Javascriptu.