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 i bottom nie działają na elementach statycznych.

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

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 i bottom. Co ważne - przestrzeń, którą element zajmował, jest zachowana.

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

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 początkowego bloku zawierającego (obszaru o rozmiarze okna).

.pyramid-container {
  position: relative; /* kontekst pozycjonowania */
  width: 500px;
  height: 400px;
}

.treasure {
  position: absolute;
  top: 50px;
  right: 30px;
}

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.

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2C1810;
  z-index: 100;
}

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 a fixed. Zachowuje się jak relative dopóki użytkownik nie przewinie strony do określonego punktu - wtedy "przykleja się" i zachowuje się jak fixed.

.section-header {
  position: sticky;
  top: 0;
  background-color: #FFD700;
  padding: 10px;
}

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 i sticky), właściwość z-index decyduje o ich kolejności.

.background-layer {
  position: absolute;
  z-index: 1;  /* najniżej */
}

.middle-layer {
  position: absolute;
  z-index: 2;  /* pośrodku */
}

.front-layer {
  position: absolute;
  z-index: 3;  /* na wierzchu */
}

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 (oraz na elementach flex i grid, które poznasz w kolejnych modułach)
• 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.

.scroll-container {
  width: 300px;
  height: 200px;
  overflow: hidden;  /* ukrywa nadmiar */
}

.scroll-container-visible {
  overflow: scroll;  /* zawsze pokazuje paski przewijania */
}

.scroll-container-auto {
  overflow: auto;    /* paski przewijania tylko gdy potrzebne */
}

• 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.

.column-left {
  float: left;
  width: 50%;
}

.column-right {
  float: right;
  width: 50%;
}

/* Clearfix - naprawia problem z float */
.container::after {
  content: "";
  display: table;
  clear: both;
}

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

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 i z-index możesz umieszczać elementy dokładnie tam, gdzie chcesz - niczym architekt świątyni Karnaku!"

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pozycjonowanie CSS - Piramida</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Pozycjonowanie CSS w Egipcie</h1>

    <h2>1. position: relative</h2>
    <div class="demo-box">
        <div class="stone">Normalny</div>
        <div class="stone moved">Przesunięty (relative)</div>
        <div class="stone">Normalny</div>
    </div>

    <h2>2. position: absolute</h2>
    <div class="pyramid-room">
        <div class="treasure treasure-1">Skarb 1</div>
        <div class="treasure treasure-2">Skarb 2</div>
        <div class="treasure treasure-3">Skarb 3</div>
    </div>

    <h2>3. z-index - warstwy malowidła</h2>
    <div class="painting">
        <div class="layer layer-bg">Tło (z-index: 1)</div>
        <div class="layer layer-mid">Piramidy (z-index: 2)</div>
        <div class="layer layer-front">Faraon (z-index: 3)</div>
    </div>

    <h2>4. overflow</h2>
    <div class="scroll-demo">
        <p>Ten tekst jest zbyt długi dla swojego kontenera. Overflow: auto dodaje pasek przewijania gdy zawartość nie mieści się w elemencie. Starożytni Egipcjanie zapisywali długie teksty na zwojach papirusu - CSS pozwala nam przewijać treść w podobny sposób!</p>
    </div>
</body>
</html>