Pozycjonowanie — CSS

Właściwość position zmienia sposób pozycjonowania elementu.

Jak to działa?

relative tworzy kontekst odniesienia, absolute pozwala pozycjonować względem przodka, a sticky przykleja element podczas przewijania w granicach kontenera.

Przykład 1 — poznaj zapis

.card { position: relative; }
.card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

Badge zostanie umieszczony w prawym górnym rogu karty.

Przeczytaj kod linijka po linijce

.card { position: relative; }Przypisujemy wartość wybranej właściwości CSS.
.card__badge {Wybieramy elementy, które mają otrzymać podane style.
position: absolute;Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Etykieta w prawym górnym rogu karty.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.box { position: relative; } .tag { position: absolute; top: 0; right: 0; }

Wynik drugiego przykładupo uruchomieniu przykładu

Etykieta .tag znajduje się w prawym górnym rogu .box.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Ustaw pasek nawigacji jako position: sticky.