Do zmiany pozycji elementów (takich jak div, obrazy lub innych) na stronie, bardzo przydatna jest właściwość position. Może ona przyjmować następujące wartości:
- static
- relative
- absolute
- fixed
- sticky
Właściwość określającą typ pozycji, można wykorzystywać z właściwościami top, left, right i bottom. Pozycja elementów, będzie różna w zależności, od ustawionej wartości.
Pozycja statyczna position: static;
Elementy HTML domyślnie mają pozycję statyczną. Przy tej wartości, właściwości top, left, right i bottom nie działają.
Element z ustawioną właściwością position: static; jest pozycjonowany w standardowy sposób, tak jak to miało miejsce dotychczas. Dla przypomnienia, poniżej znajduje się przykład.
Pozycja relatywna position: relative;
Gdy dla elementu ustawisz właściwość position: relative;, to będzie się on ustawiał relatywnie względem swojej oryginalnej pozycji. Poniżej przykład, który odsuwa element o 50px od lewej krawędzi.
Pozycja absolutna position: absolute;
Element z ustawioną position: absolute, będzie pozycjonowany względem najbliżego przodka, który nie ma pozycji statycznej.
Jeżeli brzmi to trochę skomplikowanie, to spójrz na poniższy przykład. Tworzymy główny kontener, który jest relatywny. W nim dodajemy 3 kontenery, z czego ostatni będzie miał pozycję absolutną.
Kontener z pozycją absolutną, jest pozycjonowany względem kontenera relatywnego. Ponadto kontener z pozycją absolutną, nie wpływa na położenie innych elementów.
Pozycja stała position: fixed;
position: fixed; można tłumaczyć na kilka sposobów - możemy powiedzieć, że jest to pozycja stała, pozycja ustalona lub pozycja nieruchoma. Jakiego określenia byśmy nie użyli,
to ważna abyś zapamiętał, że element z position: fixed, będzie zawsze w tym samym miejscu, nawet jeżeli będziesz przewijał stronę w dół.
Ten typ pozycji, często stosuje się aby nagłówek strony z linkami zawsze znajdował się u samej góry. Można również wykorzystać tą właściwość, do wyświetlania jakiegoś przycisku w rogu ekrannu.
Pozycja lepka position: sticky;
Właściwość position: sticky; jest bardzo ciekawa w zastosowaniu. Jest ona połączeniem pozycjonowania relatywnego oraz pozycji stałej.
Pozycjonowanie zależy od pozycji scroll'a. Dopóki cały element mieści się na ekranie, to jego pozycja będzie relatywna. Gdy zescrollujesz stronę, a element zacznie "wyjeżdżać" poza jej obręb, to przklei się on
we wskazanym miejscu i będzie zajmował stałą pozycję.
To zachowanie zobrazuje poniższy przykład: