CSS position

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS position

Właściwość CSS position określa sposób pozycjonowania elementu na stronie. To do niej można przypisać wartości: static, relative, absolute, fixed oraz sticky.

Najważniejsze wartości

  • static - wartość domyślna. Element znajduje się w normalnym układzie dokumentu, a właściwości top, right, bottom, left nie działają.
  • relative - element pozostaje w swoim miejscu w układzie, ale można go przesunąć względem jego pierwotnej pozycji.
  • absolute - element jest wyjęty z normalnego układu strony i pozycjonowany względem najbliższego pozycjonowanego przodka, czyli takiego, który ma np. position: relative.
  • fixed - element jest pozycjonowany względem okna przeglądarki i pozostaje w tym samym miejscu podczas przewijania strony.
  • sticky - element zachowuje się jak relative, dopóki nie osiągnie określonej pozycji podczas przewijania, wtedy „przykleja się” jak fixed.

Przykład

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Taki kod sprawi, że element z klasą menu będzie stale widoczny u góry okna przeglądarki.

Właściwości pomocnicze

Z position często używa się:

  • top,
  • right,
  • bottom,
  • left,
  • z-index.

Na egzaminie należy zapamiętać, że zestaw wartości static, relative, fixed, absolute, sticky jednoznacznie wskazuje na właściwość position, a nie na display, text-transform ani list-style-type.