wtorek, 2024-01-02

CSS: Własność position

Właściwość position w CSS jest używana do określenia sposobu, w jaki element jest umieszczany na stronie. Pozwala ona na precyzyjną kontrolę nad położeniem elementów i może przyjmować różne wartości, które mają swoje specyficzne zastosowania i są użyteczne w rozmaitych scenariuszach projektowania stron internetowych. Dobór odpowiedniej wartości position zależy od konkretnych potrzeb układu i interakcji elementów na stronie.

Wartości, jakie może przyjmować position

static

• Jest to domyślna wartość. Elementy są pozycjonowane według normalnego przepływu dokumentu. Właściwości top, right, bottom, left i z-index nie mają wpływu na elementy z position: static;.
• Przykład: position: static;

relative

• Element jest pozycjonowany względem jego normalnego położenia. Możesz używać top, right, bottom, left do przesunięcia elementu od tego punktu. Inne elementy w układzie nie dostosowują się do przesunięcia.
• Przykład: position: relative; top: 10px; left: 20px;

absolute

• Element jest pozycjonowany względem najbliższego pozycjonowanego (tj. inaczej niż static) elementu nadrzędnego. Jeśli takiego nie ma, jest pozycjonowany względem początkowego kontenera formatującego. Element jest usuwany z normalnego przepływu dokumentu, co oznacza, że nie wpływa na położenie innych elementów.
• Przykład: position: absolute; top: 0; right: 0;

fixed

• Element jest pozycjonowany względem okna przeglądarki. Pozostaje on w tym samym miejscu, nawet podczas przewijania strony. Tak jak w absolute, element jest usuwany z normalnego przepływu dokumentu.
• Przykład: position: fixed; bottom: 0; left: 0;

sticky

• Jest to mieszanka pozycjonowania relative i fixed. Element jest traktowany jako relative, dopóki jego położenie w oknie przeglądarki nie osiągnie określonej pozycji, w której zaczyna zachowywać się jak fixed. Jest to przydatne na przykład dla nagłówków tabeli lub menu nawigacyjnego.
• Przykład: position: sticky; top: 0;

inherit / initial / unset

• Pozwalają na dziedziczenie wartości z elementu rodzica (inherit), ustawienie na wartość domyślną (initial) lub zresetowanie wartości (unset).

Demonstracja efektu różnych wartości position

W demonstracji wewnątrz kontenera z własnością position ustawioną na relative znajdują się dwa elementy – „Box” oraz akapit z tekstem. Za pomocą poniższych przycisków można zmieniać ustawienie własności position elementu „Box”. W przypadku wartości sticky, aby zobaczyć efekt, należy przewinąć zawartość kontenera.

Static Relative Absolute Fixed Sticky