kod CSS

Opis

div{
   position:static;
}

Jest to domyślna wartość tej własności. Element będzie się wyświetlał w miejscu jego napisania w dokumencie HTML, czyli jeżeli będzie on napisany na początku dokumentu HTML to będzie on tam wyświetlany.

div{
   position:absolute;
}

Jest to pozycja absolutna, czyli obiekt jest w miejscu, gdzie go umieścimy.

11a. position: absolute

div{
   position:fixed
}

W tym przypadku tak pozycjonowany element będzie się znajdował zawsze w tym samym miejscu, będzie niejako przyklejony na stałe w jedno miejsce.

11b. position: fixed

div{
   position:relative
}

W tym przypadku pozycjonujemy element względem (relatywnie) do innych elementów

11c. position: relative

div{
   position:sticky
}

Ten sposób pozycjonowania jest bardzo ciekawy. Bazuje on na pozycji paska przewijania. Jeżeli tak pozycjonowany element nie znajduje się na górze strony to zachowuje się jak element pozycjonowany w sposób relatywny. Ale jeżeli przeglądarka wykryje, że górna krawędź tego elementu jest na górze strony, to element przykleja się do górnej krawędzi okna przeglądarki. Można w ten sposób zrobić menu, które zawsze będzie wyświetlane w oknie przeglądarki.

ten sposób pozycjonowania nie jest wspierany przez IE/Edge 15 i wcześniejsze. Wspierane przez Safari od wersji 6.1 z prefiksem -webkit-

11d. position: sticky

div{
   position:initial
}

Jest ustawiana domyślna wartość dla własności position

div{
   position:inherit
}

Element pozycjonowany bierze wartość własności position od swojego rodzica.