div ( z-index: 1; /* integer */ )
z-index
Nieruchomość w CSS steruje pionowym kolejność układania elementów, które się pokrywają. Tak jak w przypadku, który wydaje się, jakby był fizycznie bliżej ciebie. z-index
wpływa tylko na elementy, które mają wartość pozycji inną niż static
(domyślna).
Elementy mogą się nakładać z różnych powodów, na przykład względne pozycjonowanie przesunęło go nad coś innego. Ujemny margines przyciągnął element do innego. Absolutnie ustawione elementy nachodzą na siebie. Z różnych powodów.


Bez z-index
wartości elementy układają się w kolejności, w jakiej pojawiają się w DOM (najniższy niżej na tym samym poziomie hierarchii pojawia się na górze). Elementy z pozycjonowaniem niestatycznym zawsze pojawią się nad elementami z domyślnym pozycjonowaniem statycznym.
Należy również pamiętać, że zagnieżdżanie odgrywa dużą rolę. Jeśli element B znajduje się na wierzchu elementu A, element potomny elementu A nigdy nie może być wyższy niż element B.


Zauważ, że starsza wersja IE trochę schrzaniła ten kontekst. Oto poprawka dla jQuery.
Więcej informacji
- Prezentacja ekranu: Jak działa indeks Z
- MDN Docs
- Obszerny artykuł: Zrozumienie z-index
- Racjonalne wartości indeksu Z
Wsparcie przeglądarki
Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
---|---|---|---|---|---|---|
Pracuje | Pracuje | Pracuje | Pracuje | 4+ | 4+ | Pracuje |