Kurs HTML

Wprowadzenie: Kontrola pozycji elementu

Właściwość position w CSS pozwala na zmianę domyślnego sposobu pozycjonowania elementu w przepływie dokumentu. Domyślnie elementy są pozycjonowane statycznie (position: static;), co oznacza, że układają się jeden po drugim zgodnie z kolejnością w kodzie HTML.

Zmieniając wartość position, zyskujemy możliwość precyzyjnego umieszczania elementów na stronie, niezależnie od ich naturalnego miejsca w przepływie. W połączeniu z właściwościami przesunięcia (top, right, bottom, left), position otwiera drzwi do tworzenia bardziej złożonych layoutów.

W tej lekcji omówimy dwie podstawowe wartości: static i relative.

position: static; (Pozycjonowanie statyczne)

Jest to **wartość domyślna** dla wszystkich elementów HTML. Elementy z position: static; są pozycjonowane zgodnie z **normalnym przepływem dokumentu (normal flow)**.

• Elementy blokowe zajmują dostępną szerokość i układają się jeden pod drugim.
• Elementy inline i inline-block układają się w linii, zawijając się w razie potrzeby.
• Właściwości przesunięcia (top, right, bottom, left) oraz z-index **nie mają żadnego wpływu** na elementy z position: static;.

W praktyce rzadko jawnie ustawiamy position: static;, ponieważ jest to zachowanie domyślne.

.element {
  position: static; /* Domyślne zachowanie */
  top: 50px; /* Ignorowane */
  left: 100px; /* Ignorowane */
}

position: relative; (Pozycjonowanie relatywne)

Ustawienie position: relative; na elemencie sprawia, że jest on pozycjonowany **względnie do swojej normalnej pozycji** w przepływie dokumentu.

• Pozostaje w przepływie: Element nadal zajmuje swoje pierwotne miejsce w layoucie, tak jakby miał position: static;. Pozostałe elementy nie przesuwają się, aby wypełnić jego pierwotne miejsce.
• Możliwość przesunięcia: Element można wizualnie przesunąć względem jego normalnej pozycji za pomocą właściwości top, right, bottom, left.
  • top: 10px; przesuwa element o 10px w dół od jego górnej krawędzi.
  • left: 20px; przesuwa element o 20px w prawo od jego lewej krawędzi.
  • bottom: 5px; przesuwa element o 5px w górę od jego dolnej krawędzi.
  • right: 15px; przesuwa element o 15px w lewo od jego prawej krawędzi.
  Wartości mogą być dodatnie lub ujemne. Jeśli ustawisz jednocześnie top i bottom (lub left i right), przeglądarka zazwyczaj uwzględni top (lub left) w trybie zapisu od lewej do prawej.
• Tworzy nowy kontekst pozycjonowania: Element z position: relative; staje się **blokiem zawierającym (containing block)** dla swoich potomków, którzy mają ustawione position: absolute;. Jest to kluczowa cecha, którą wykorzystamy w następnych lekcjach.
• Respektuje z-index: Można kontrolować kolejność nakładania się elementów (stacking order) za pomocą z-index.

position: relative; jest często używane do niewielkich przesunięć wizualnych bez zaburzania głównego layoutu lub jako "kotwica" dla absolutnie pozycjonowanych elementów potomnych.

<div class="box static-box">Static</div>
<div class="box relative-box">Relative</div>
<div class="box static-box">Static</div>

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block; /* Dla ułożenia obok siebie */
  border: 1px solid black;
}

.static-box {
  background-color: lightgray;
}

.relative-box {
  position: relative;
  background-color: lightcoral;
  top: 20px; /* Przesunięcie o 20px w dół */
  left: 30px; /* Przesunięcie o 30px w prawo */
  /* Pierwotne miejsce nadal jest zajęte! */
}

W powyższym przykładzie, pudełko "Relative" zostanie wizualnie przesunięte w dół i w prawo, ale puste miejsce, które normalnie by zajmowało między dwoma pudełkami "Static", pozostanie.

Właściwości przesunięcia: top, right, bottom, left

Te właściwości działają tylko dla elementów, których position jest inne niż static (czyli relative, absolute, fixed lub sticky).

• Określają one odległość między daną krawędzią elementu a jego **pozycją odniesienia**.
• Dla position: relative;, pozycją odniesienia jest normalna pozycja elementu w przepływie.
• Dla position: absolute;, pozycją odniesienia jest krawędź najbliższego pozycjonowanego przodka (innego niż static).
• Dla position: fixed;, pozycją odniesienia jest krawędź viewportu (okna przeglądarki).
• Dla position: sticky;, zachowanie jest bardziej złożone (mieszanka relative i fixed).

Wartościami mogą być jednostki długości (px, em, %) lub auto (domyślne).