Nakładanie {z-index}

selektor { position: rodzaj; parametry; z-index: numer }

Polecenie to pozwala określić, w jaki sposób mają się nakładać elementy pozycjonowane. Normalnie kolejność nakładania (zakrywania) zależy od kolejności wpisywania elementów w kodzie źródłowym dokumentu, tzn. elementy które zostały wpisane na końcu, zakrywają te poprzednie. Dzięki z-index możemy to dowolnie zmieniać. Nawet jeśli jakiś element został wpisany jako ostatni, może on być na samym spodzie (zakryty przez inne) - wystarczy nadać mu parametr z-index: 1.

Polecenie to możemy zastosować, tylko jeśli element jest poddany pozycjonowaniu.

Interpretowane są również wartości ujemne. Dzięki podaniu np. "z-index: -1", pozycjonowany element nie zakryje tekstu czy innych znaczników, które znajdowały się wcześniej w danym miejscu, lecz zostanie wyświetlony pod nimi (zwykły tekst i inne elementy domyślnie mają "z-index: 0"). Wartości bardziej mniejsze od zera (-2, -3, -4,...) mają zastosowanie, jeśli chcemy wyświetlić pod tekstem więcej elementów w określonej kolejności nakładania:

co można przedstawić w trzech wymiarach następująco:

Skąd w ogóle wzięła się nazwa "z-index"? Index (indeks), to po prostu numer porządkowy określający kolejność. Natomiast przedrostek "z" odnosi się do trzeciego wymiaru układu współrzędnych, który swój początek ma w lewym-górnym rogu ekranu:

1. oś "x" - biegnie poziomo w prawo
2. oś "y" - biegnie pionowo w dół
3. oś "z" - jest skierowana w stronę użytkownika patrzącego na ekran

Taki nietypowy układ współrzędnych, z osią "y" skierowaną w dół, pochodzi od pierwszych terminali tekstowych, gdzie pisząc kolejne znaki, kursor przesuwał się po ekranie w prawo, a po przejściu do kolejnej linijki tekstu - w dół. Oś "z", jeżeli chodzi o ścisłość, właściwie powinna być skierowana przeciwnie (w głąb ekranu), ale ponieważ pozycjonowane elementy zwykle nakładamy ponad tekstem, byłoby mało praktyczne, gdyby za każdym razem trzeba było posługiwać się liczbami ujemnymi. Warto zapamiętać tę zasadę, ponieważ odnosi się ona do wszystkich przypadków, gdzie występują współrzędne ekranowe, np. w edytorach do tworzenia i obróbki grafiki komputerowej.

Przykład {z-index}

<img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..."><br>
<img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="...">

<img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..."><br>
<img style="position: relative; left: 84px; bottom: 91px; z-index: 1" src="punkt.gif" alt="...">

Jak widać w drugim przypadku kolejność nakładania zmieniła się (teraz obrazek zakrywa punkt), mimo że polecenia zostały wpisane w takiej samej kolejności.

Kontekst stosu

Porządek nakładania elementów nazywamy stosem. Porządek ten nie jest taki sam dla całego dokumentu, lecz może istnieć kilka odrębnych kontekstów stosu (ang. stacking context). Każdy element pozycjonowany (również relatywnie), posiadający wartość z-index inną niż auto, tworzy nowy kontekst, który jest niezależny od innych. W CSS 3 kontekst stosu jest tworzony również przez elementy z ustaloną przezroczystością mniejszą niż 1. Kolejność nakładania elementów, znajdujących się wewnątrz kontekstu, jest ustalana zgodnie z wartością z-index - większa wartość przykrywa mniejsze. Różnica pojawia się, w przypadku rozpatrywania nakładania elementów z dwóch odrębnych kontekstów stosu. W takim przypadku, jeśli element tworzący jeden kontekst, ma wyższą wartość z-index niż dla drugiego kontekstu, wszystkie elementy z pierwszego będą przykrywały drugie, niezależnie jaką wartość z-index posiadają. Może się zatem zdarzyć, że element z wartością "z-index: 1" z pierwszego kontekstu znajdzie się ponad elementem "z-index: 2" z drugiego kontekstu, ponieważ pierwszy kontekst w całości przykrywa drugi.

MSIE 7 nieprawidłowo wyznacza nowy kontekst stosu dla każdego bloku obejmującego, nawet jeśli nie ma on przypisanej wartości z-index innej niż auto (domyślnie).

Przykład {z-index}

Element "z-index: 1" z pierwszego stosu powinien przykrywać "z-index: 2" z drugiego kontekstu, ponieważ drugi kontekst ma niższy z-index od pierwszego, a więc wszystkie jego elementy powinny być przykryte przez zawartość pierwszego stosu:

Gdyby bloki oznaczone jako "kontekst" (pierwszy i drugi) nie miały przypisanej wartości z-index", nie powinny wyznaczać kontekstu stosu. Wtedy kolejność nakładania powinna być następująca (poczynając od elementów przykrytych na samym spodzie): "z-index: 1" (blok pierwszy), "z-index: 1" (blok drugi), "z-index: 2" (blok pierwszy), "z-index: 2" (blok drugi). Niestety MSIE 7 zachowuje się w takim przypadku nieprawidłowo i wyznacza dwa odrębne konteksty stosu, z których drugi przykrywa oba elementy pierwszego: