Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie

Logowanie/Rejestracja->

Pozycjonowanie CSS

Wyobraź sobie, że budujesz wnętrze egipskiej piramidy. Każda dekoracja, każdy hieroglif i każdy posąg musi znajdować się w dokładnie zaplanowanym miejscu. Właśnie do tego służy pozycjonowanie w CSS - daje nam pełną kontrolę nad tym, gdzie na stronie pojawią się nasze elementy.

Właściwość position

Właściwość

position

w CSS określa, w jaki sposób element jest rozmieszczony na stronie. Ma pięć głównych wartości, z których każda zachowuje się inaczej.

position: static (domyślna)

Każdy element HTML domyślnie ma

position: static

. Oznacza to, że element wyświetla się w normalnym przepływie dokumentu - jeden pod drugim (bloki) lub obok siebie (inline). Właściwości

top

left

right

bottom

nie działają na elementach statycznych.

1.element {
2  position: static; /* domyślna wartość */
3}

To jak kamienie ułożone naturalnie w piramidzie - każdy leży na swoim miejscu, zgodnie z kolejnością budowania.

position: relative

Element z

position: relative

pozostaje w normalnym przepływie dokumentu, ale możesz go przesunąć względem jego oryginalnej pozycji za pomocą

top

left

right

bottom

. Co ważne - przestrzeń, którą element zajmował, jest zachowana.

1.hieroglyph {
2  position: relative;
3  top: 20px;    /* przesuwa w dół o 20px */
4  left: 30px;   /* przesuwa w prawo o 30px */
5}

Wyobraź sobie hieroglif wyryty na ścianie, który lekko przesuwamy - jego "miejsce" w rzędzie innych hieroglifów wciąż istnieje, ale sam symbol jest nieco przesunięty.

position: absolute

Element z

position: absolute

jest wyjęty z normalnego przepływu dokumentu. Pozycjonuje się względem najbliższego przodka, który ma

position

inne niż

static

(czyli

relative

absolute

fixed

lub

sticky

). Jeśli takiego przodka nie ma - pozycjonuje się względem elementu

<html>

1.pyramid-container {
2  position: relative; /* kontekst pozycjonowania */
3  width: 500px;
4  height: 400px;
5}
6
7.treasure {
8  position: absolute;
9  top: 50px;
10  right: 30px;
11}

To jak umieszczanie skarbu w konkretnym miejscu komnaty piramidy. Skarb nie wpływa na pozycje innych przedmiotów - po prostu leży tam, gdzie go położysz.

position: fixed

Element z

position: fixed

jest pozycjonowany względem okna przeglądarki (viewport). Pozostaje na swoim miejscu nawet podczas przewijania strony.

1.navigation {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 100%;
6  background-color: #2C1810;
7  z-index: 100;
8}

Pomyśl o tym jak o gwieździe na niebie Egiptu - bez względu na to, gdzie idziesz po pustyni, gwiazda zawsze jest w tym samym miejscu na firmamencie. Tak samo element

fixed

zawsze widoczny jest w tym samym punkcie ekranu.

position: sticky

Element

sticky

to hybryda między

relative

fixed

. Zachowuje się jak

relative

dopóki użytkownik nie przewinie strony do określonego punktu - wtedy "przykleja się" i zachowuje się jak

fixed

1.section-header {
2  position: sticky;
3  top: 0;
4  background-color: #FFD700;
5  padding: 10px;
6}

To jak straż pilnująca wejścia do komnaty faraona. Stoi na swoim miejscu, ale gdy zbliżasz się do progu, blokuje przejście i nie rusza się dalej.

z-index i kontekst nakładania

Gdy elementy się na siebie nakładają (co zdarza się przy pozycjonowaniu

absolute

relative

fixed

sticky

), właściwość

z-index

decyduje o ich kolejności.

1.background-layer {
2  position: absolute;
3  z-index: 1;  /* najniżej */
4}
5
6.middle-layer {
7  position: absolute;
8  z-index: 2;  /* pośrodku */
9}
10
11.front-layer {
12  position: absolute;
13  z-index: 3;  /* na wierzchu */
14}

Wyobraź sobie egipskie malowidło ścienne składające się z warstw: najpierw tło pustynne (z-index: 1), potem piramidy (z-index: 2), a na samym wierzchu postacie faraonów (z-index: 3). Im wyższy

z-index

, tym bliżej widza (na wierzchu) znajduje się element.

Ważne zasady z-index:

Działa tylko na elementach z
```
position
```
innym niż
```
static
```
Elementy bez
```
z-index
```
mają domyślną wartość
```
auto
```
(równoważne 0)
Wyższy
```
z-index
```
oznacza wyświetlanie "nad" innymi elementami
Elementy z tym samym
```
z-index
```
wyświetlają się w kolejności zapisu w HTML

Właściwość overflow

Kiedy zawartość elementu jest większa niż sam element, właściwość

overflow

kontroluje, co się z nią dzieje.

1.scroll-container {
2  width: 300px;
3  height: 200px;
4  overflow: hidden;  /* ukrywa nadmiar */
5}
6
7.scroll-container-visible {
8  overflow: scroll;  /* zawsze pokazuje paski przewijania */
9}
10
11.scroll-container-auto {
12  overflow: auto;    /* paski przewijania tylko gdy potrzebne */
13}

```
overflow: hidden
```
- ukrywa zawartość wychodzącą poza element (jak mur piramidy, za którym nie widać wnętrza)
```
overflow: scroll
```
- zawsze pokazuje paski przewijania
```
overflow: auto
```
- paski przewijania pojawiają się tylko gdy zawartość jest większa niż kontener

Float i clearfix (kontekst historyczny)

Przed erą Flexbox i Grid, do tworzenia układów kolumnowych używano właściwości

float

. Choć dziś jest to przestarzałe podejście, warto je znać, bo spotkasz je w starszym kodzie.

1.column-left {
2  float: left;
3  width: 50%;
4}
5
6.column-right {
7  float: right;
8  width: 50%;
9}
10
11/* Clearfix - naprawia problem z float */
12.container::after {
13  content: "";
14  display: table;
15  clear: both;
16}

float

wyciąga element z normalnego przepływu i "unosi" go do lewej lub prawej strony kontenera. Problem polega na tym, że kontener rodzica "zapomina" o wymiarach dzieci z float - dlatego potrzebny jest clearfix.

Dziś zamiast float używamy

display: flex

lub

display: grid

, które są znacznie prostsze i bardziej przewidywalne. Float pozostaje przydatny głównie do owijania tekstu wokół obrazków.

Podsumowanie

| Wartość | Przepływ | Pozycjonowanie względem | Przewijanie | |---------|----------|------------------------|-------------| | static | normalny | - | tak | | relative | normalny | własna pozycja | tak | | absolute | wyjęty | pozycjonowany przodek | tak | | fixed | wyjęty | viewport | nie | | sticky | normalny/wyjęty | viewport (po osiągnięciu progu) | przykleja się |

Mohamed mówi: "Tak jak budowniczowie piramid musieli precyzyjnie planować położenie każdego kamienia, tak i ty musisz rozumieć pozycjonowanie CSS. Z

position

z-index

możesz umieszczać elementy dokładnie tam, gdzie chcesz - niczym architekt świątyni Karnaku!"

Przejdź do CodeWorlds→