CSS właściwość position (absolute, relative, static, fixed)

CSS właściwość position (absolute, relative, static, fixed)

Czas czytania: 3 minut

Dziś zajmiemy się właściwością CSS position z pomocą, której możemy modyfikować pozycję różnych elementów na stronie. Chodzi np. o zatrzymanie w pewnym miejscu <div>, <header> czy wysunięcie elementu HTML z okalającego go kontenera (rodzica).

Jakie ustawienia ma właściwość „position”?

Z pomocą właściwości CSS position (z ang. pozycja) tak jak pisałam możemy modyfikować pozycję oraz właściwości obiektu HTML. W zależności od tego, której wartości użyjemy uzyskamy nieco inny efekt.

Wartości przyjmowane przez „position”:

  • static – pozycja statyczna będąca, jest to opcja domyślna.
  • relative – pozycja relatywna
  • absolute – pozycja absolutna
  • fixed – element będzie posiadał pozycję ustaloną

Pozycjonowanie elementów HTML z właściwością „position”

Do manipulacji położeniem elementów HTML z właściwością CSS position wykorzystać możemy następujące właściwości:

  • top – odstęp od góry
  • bottom – odstęp od dołu
  • left – przesunięcie od lewej
  • right – przesunięcie od prawej

Właściwości te zazwyczaj przyjmują wartości liczbowe np. 20px, 1rem, 1em, 20%. O jednostkach wielkości stosowanych w CSS przeczytać możecie tutaj -> Jednostki stosowane w CSS

Jak działa position?

Teraz czas na przykłady, w ten sposób można najlepiej zrozumieć jak one działają. Dość istotne jest też, że niektóre właściwości by działały poprawnie wymagają by ich rodzic lub inny nadrzędny element miał również odpowiednią pozycję.

Do każdej właściwości przygotuję po kilka przykładów bez „przesunięcia” oraz z „przesunięciem”.

Działanie static

Działanie ustawienia static bez przesunięcia:

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – static
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Kod CSS przykładu:

.container-1{
  border: 1px dashed;
  background: #d7b2b2;
  color: #000;
  padding: 7px;
}
.container-1 div{
    border: 1px solid;
    margin-bottom: 6px;
}
.position-static{position: static;}

Kod HTML przykładu:

<div class="container-1">
<div>Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS - position</div>
<div class="position-static">przykładowy element z pozycją - static</div>
<div>Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS - position</div>
</div>

Działanie ustawienia static z przesunięciem top:30px; :

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – static
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Działanie relative

Działanie ustawienia relative bez przesunięcia:

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – static
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Działanie ustawienia relative z przesunięciem top:30px; :

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – static
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Pozycja absolutna elementu – absolute

W tym przypadku musimy na element nadrzędny dodać ustawienie position:relative; w przeciwnym razie nasz tekstowy kontener wyświetlił by się w różnych „dziwnych” miejscach (w zależności od ustawień).

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – absolute
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Kod CSS:

.position-absolute{ position: absolute;}

Kod, struktura HTML:

<div class="container-1 position-relative">
<div>Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS - position</div>
<div class="position-relative">przykładowy element z pozycją - absolute</div>
<div>Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS - position</div>
</div>

Działanie ustawienia absolute z przesunięciem top:30px; :

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – static
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Kod HTML przykładu

<div class="container-1 position-relative">
<div>Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS - position</div>
<div class="position-absolute" style="top:30px;">przykładowy element z pozycją - static</div>
<div>Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS - position</div>
</div>

Działanie ustawienia absolute z przesunięciem top:30px; right: -10px; :

Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position
przykładowy element z pozycją – static
Przykładowy tekst do wyświetlenia na stronie w celu demonstracji właściwości CSS. Testujemy dziś właściwość CSS – position

Przyklejony element do krawędzi ekranu z fixed

Użycie tej właściwości spowoduje, że element który będzie ją posiadał zostanie umieszczony z waleczności od innych właściwości do góry lub na dole strony. Czyli uzyskujemy efekt tak zwanego przyklejonego elementu sticky (footer lub np. menu, header). Element ten będzie się przesuwał w czasie skrolowania strony.

By umieścić footer (czyli stopkę) na dole ekranu używamy:

footer{
 position: fixed;
 bottom: 0;
}

Umieszczenie zaś elementu do góry ekranu jest zdecydowanie bardziej proste. Góra ekranu jest bowiem domyślnym ustawieniem.

footer{
 position: fixed;
 top: 0;
}

Jeżeli macie jakieś jeszcze pytania zostawcie je w komentarzu!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go

%d bloggers like this: