Własność z-index określa kolejność elementów wzdłuż osi z. Kiedy elementy nachodzą na siebie, kolejność osi z decyduje, który element przykrywa inny. Element z większym indeksem z zazwyczaj przykrywa element z mniejszym.

Składnia

/* Właściwość wartość */
z-index: auto;

/* wartość jako liczba */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* wartość ujemna w celu zmniejszenia priorytetu */

/* globalne wartości */
z-index: inherit;
z-index: initial;
z-index: unset;

Wartość z-index jest określona słowem kluczowym auto lub jako <liczba>.

Wartości

auto 
Element jest rysowany w takiej samej kolejności względem osi z jak element z z-index: 0.Nie tworzy nowego kontekstu nakładania.
<liczba>
Element jest rysowany w podanej kolejności względem osi z. Tworzy również nowy kontekst nakładania, co oznacza, że wszystkie jego elementy potomne również są rysowane z takim samym indeksem z. Oznacza to również, że indeksy z elementów potomnych nie są porównywane do indeksów z elementów na zewnątrz danego elementu.

Przykład

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Wynik

Specifikacja

Specification Status Comment
CSS Transitions
The definition of 'animation behavior for z-index' in that specification.
Working Draft Defines z-index as animatable.
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification.
Recommendation Initial definition

Zgodność z przeglądarką

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
z-indexChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
Negative valuesChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 4Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

Zobacz także

position

Autorzy i etykiety dokumentu

Autorzy tej strony: kamilpikula, teoli, Witia, Bedi, Ptak82, Mgjbot
Ostatnia aktualizacja: kamilpikula,