A z-index tulajdonság

A z-index tulajdonság határozza meg, hogy ki lesz felül abban az esetben, ha több elem egymásra helyeződik.

Szintaxis

cssszelektor {
  z-index: szám | auto;
}

A számnak egész számnak kell lennie, pozitívnak vagy negatívnak. Lehet nulla is.

Értékek

Érték	Leírás
Szám	Az egész szám megadja az elemek egymásra helyezésének sorrendjét: ha az elemek egymásra helyeződnek, felül az lesz, amelyiknek a `z-index` értéke nagyobb.
`auto`	Az egymásra helyezés sorrendje automatikusan épül fel: feljebb lesz az az elem, amelyik alacsonyabban helyezkedik el a HTML kódban.

Alapértelmezett érték: auto.

Példa

Ebben a példában a blokkok egymásra helyeződnek a HTML kódban való előfordulási sorrendjük szerint (a z-index nincs megadva és az alapértelmezett értéke lesz - auto). Az első blokk lesz legalul (piros), az utolsó pedig legfelül (zöld):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Példa

Változtassuk meg az egymásra helyezés sorrendjét a z-index megadásával. A piros blokk kapjon 3-at, a kék 2-őt, a zöld pedig 1-et. Az egymásra helyezés sorrendje megfordul (legfelül a z-index 3 értékű blokk lesz):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат: