Pozycjonowanie i Z-Index

Zazwyczaj elementy HTML układają się grzecznie jeden pod drugim, niczym bloki w Tetrisie (jest to tzw. normal flow). Czasem jednak (i to bywa w poleceniach CKE!) musimy przykleić menu do góry ekranu, albo nałożyć logo w rogu zdjęcia. Do tego służy position.

Rodzaje pozycjonowania

1. position: relative (Względne)

Zmienia układ o tyle pikseli, o ile mu każesz, względem jego domyślnej pozycji.

.pudelko {
    position: relative;
    top: 20px;
    left: 10px;
}

Efekt: Zjeżdża o 20px w dół i 10px w prawo od miejsca, w którym powinien być. Inne elementy udają, że go tam w ogóle nie ma!

2. position: absolute (Bezwzględne)

Całkowicie odrywa element od strony. Inne elementy "wjeżdżają" na jego miejsce, a on lata swobodnie.

Haczyk! Pozycjonuje się on względem najbliższego rodzica, który ma wpisane position: relative. Jeśli takiego nie ma, będzie latał względem całego okna przeglądarki! To idealne do kładzenia znaczka "Promocja" na obrazku produktu.

3. position: fixed (Przyklejone do okna)

Klasyk. Górne menu, które zawsze przewija się razem ze stroną, albo denerwujący komunikat o ciasteczkach na dole ekranu. Zawsze przytwierdzone do krawędzi Twojego monitora/okna.

4. position: sticky (Lepkie)

Element zachowuje się normalnie, aż nie przewiniesz ekranu do jego krawędzi – wtedy się przykleja (tak jak nasze menu w tym kursie u samej góry!).

Z-Index: Nakładanie warstw

Gdy oderwiesz elementy od płaskiej strony, zaczną na siebie nachodzić. Kto będzie wyżej? Ten, kto jest niżej w kodzie HTML. A jak to zmienić? Za pomocą z-index.

.logo {
    position: absolute;
    z-index: 10;
}

Wyższy z-index = element bliżej oczu użytkownika.

Ważne: z-index działa tylko na elementach wypozycjonowanych (czyli tych z relative, absolute, fixed, sticky). Jeśli nałożysz go na zwykły div w normal flow, przeglądarka to zignoruje!