Indeks z - CSS-Tricks

Anonim
div ( z-index: 1; /* integer */ )

z-indexNieruchomość 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-indexwpł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-indexwartoś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