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

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:

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; :

Działanie relative

Działanie ustawienia relative bez przesunięcia:

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

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ń).

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-absolute">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; :

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ą - 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; right: -10px; :

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!