Pozycjonowanie statyczne, względne, absolutne i stałe (position)

Właściwość position w CSS pozwala określić sposób pozycjonowania elementów na stronie, umożliwiając precyzyjne rozmieszczenie i kontrolowanie ich zachowania. Główne tryby pozycjonowania to static, relative, absolute, oraz fixed.

Właściwości pozycjonowania w CSS

• position: static - domyślna pozycja elementu w dokumencie
• position: relative - pozycjonowanie elementu względem jego oryginalnej lokalizacji
• position: absolute - element pozycjonowany względem najbliższego przodka z pozycją relative
• position: fixed - element pozostaje w stałej pozycji względem okna przeglądarki

Przykłady pozycjonowania

• Static - Element pozostaje w domyślnej kolejności przepływu
• Relative - Możemy przesunąć element bez zmiany jego oryginalnego miejsca
• Absolute - Możemy precyzyjnie umiejscowić element względem jego kontenera
• Fixed - Element przylega do określonej pozycji w oknie

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

.absolute-box {
    position: absolute;
    bottom: 0;
    right: 0;
}

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Właściwość position pozwala kontrolować zachowanie elementów, ułatwiając tworzenie bardziej złożonych i interaktywnych układów.