Mi az a z-index és hogyan használják a webfejlesztésben?

z-index — ez egy CSS tulajdonság, amely meghatározza az 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 felett jelennek meg.

Használják az elemek mélységének (stacking) kezelésére, különösen azoknál az elemeknél, amelyek pozícionálással rendelkeznek (azaz, ahol a position tulajdonság értéke nem static): relative, absolute, fixed, sticky.

Főbb pontok:

• A statikus pozíciójú (position: static;) elemek nem vesznek részt a stacking kontextusban, és figyelmen kívül hagyják a z-index-et.
• A z-index érték csak azoknál az elemeknél alkalmazható, amelyek új stacking kontextust hoznak létre. Ez például a position más értékeinek használatával vagy más CSS szabályok alkalmazásával (pl. opacity < 1) történik.
• Egy ugyanazon stacking kontextusban a magasabb z-index értékű elemek kerülnek felülre.
• A beágyazott stacking kontextusok egymásra helyezkednek el, mint egy egység a szülő kontextusban.
• z-index-et nem megadva a sorrend a DOM elemek sorrendjén alapul.

Példa:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Felül van a .box2-nél */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Alatta van a .box1-nek */
}