z-index

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ą

BCD tables only load in the browser

Zobacz także