Mit felel a z-index tulajdonság a CSS-ben?

A CSS z-index tulajdonság szabályozza a pozícionált elemek egymásra helyezkedésének sorrendjét a Z-tengely mentén. A nagyobb z-index értékkel rendelkező elemek a kisebb értékűek fölé kerülnek.

Főbb pontok:

• Csak pozícionált elemekre alkalmazható (position: relative, absolute, fixed, sticky).
• Az érték lehet szám (pozitív, negatív vagy nulla).
• Az automatikus érték (auto) megfelel a DOM sorrendjének.
• Negatív z-index értékek az elemet alá helyezhetik a szülőelemnek és annak tartalmának.
• A z-index létrehoz egy rétegzési kontextust (stacking context). Egy kontextuson belüli elemek a z-index szerint rendeződnek, de az egész kontextus egységként viselkedik más kontextusokhoz képest.

Alapértelmezett rétegzési sorrend (z-index nélkül):

1. A gyökér elem háttér és keretek.
2. Negatív z-index-ű pozícionált elemek.
3. Normál folyamatban lévő blokk elemek.
4. Lebegő (float) elemek.
5. Normál folyamatban lévő inline elemek.
6. z-index: auto vagy z-index: 0-val rendelkező pozícionált elemek.
7. Pozitív z-index-ű pozícionált elemek.

Példa:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Fölé a kéknek */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Alatta a vörösnek */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Ebben az esetben a vörös blokk (z-index: 1) a kék blokk (z-index: 0) fölött lesz.