Za šta je odgovorna svojstvo z-index u CSS?

Svojstvo z-index u CSS-u kontroliše redosled slojeva pozicioniranih elemenata duž ose Z. Elementi sa većom vrednošću z-index se postavljaju iznad elemenata sa manjom vrednošću.

Ključne tačke:

• Primjenjuje se samo na pozicionirane elemente (position: relative, absolute, fixed, sticky).
• Vrednost može biti broj (pozitivan, negativan ili nula).
• Automatska vrednost (auto) odgovara redosledu u DOM stablu.
• Negativne vrednosti z-index mogu postaviti element ispod roditeljskog elementa i njegovog sadržaja.
• z-index stvara kontekst slojeva (stacking context). Elementi unutar istog konteksta se sortiraju po z-index, ali ceo kontekst se ponaša kao jedinstvena celina u odnosu na druge kontekste.

Podrazumevani redosled slojeva (bez z-index):

1. Pozadina i granice korenskog elementa.
2. Pozicionirani elementi sa negativnim z-index.
3. Blok elementi u normalnom toku.
4. Float elementi.
5. Inline elementi u normalnom toku.
6. Pozicionirani elementi sa z-index: auto ili z-index: 0.
7. Pozicionirani elementi sa pozitivnim z-index.

Primer:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Iznad plavog */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Ispod crvenog */
}

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

U ovom slučaju, crveni blok (z-index: 1) će biti iznad plavog (z-index: 0).