Co je to z-index a jak se používá ve webovém vývoji?

z-index — je vlastnost CSS, ktorá určuje poradie prekrytia (stacking) prvkov na základe ich polohy na osi Z. Prvky s vyššími hodnotami z-index sa zobrazujú nad prvkami s nižšími hodnotami.

Používa sa na správu hĺbky prekrytia prvkov s pozicionovaním (t.j. prvkov, ktorých vlastnosť position má hodnoty odlišné od static): relative, absolute, fixed, sticky.

Hlavné body použitia:

• Prvky so statickým pozicovaním (position: static;) sa nezúčastňujú na kontexte prekrytia a ignorujú z-index.
• Hodnota z-index sa aplikuje iba na prvky, ktoré vytvárajú nový kontext prekrytia. Tento kontext sa vytvára napríklad použitím position s hodnotami odlišnými od static, alebo použitím iných CSS pravidiel (napríklad opacity < 1).
• V rámci jedného kontextu prekrytia sú prvky s vyšším z-index umiestnené vyššie.
• Vnorené kontexty prekrytia sa vrstvia ako jedna celok v rámci rodičovského kontextu.
• Bez explicitného určenia z-index je poradie prekrytia určované poradím prvkov v DOM.

Príklad použitia:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Nad .box2 */
}

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