Kas yra z-index ir kaip jis naudojamas interneto kūrime?

z-index — tai CSS savybė, kuri nustato elementų sluoksnių (stacking) tvarką pagal jų padėtį Z ašyje. Didesnės z-index reikšmės elementai rodomi virš mažesnių.

Jis naudojamas elementų, turinčių pozicionavimą (t.y., position savybė turi reikšmes, skirtingas nuo static), sluoksniavimosi gylio valdymui: relative, absolute, fixed, sticky.

Pagrindiniai naudojimo punktai:

• Statinio pozicionavimo elementai (position: static;) nedalyvauja sluoksnių kontekste ir ignoruoja z-index.
• z-index reikšmė taikoma tik tiems elementams, kurie sukuria naują sluoksnių kontekstą. Šis kontekstas sukuriamas, pavyzdžiui, naudojant position su reikšmėmis, skirtingomis nuo static, arba taikant kitas CSS taisykles (pvz., opacity < 1).
• To paties sluoksnių konteksto elementai su didesniu z-index yra viršuje.
• Įdėtiniai sluoksnių kontekstai yra sluoksniuojami kaip viena visuma tėvų kontekste.
• Be aiškaus z-index nustatymo, sluoksnių tvarka nustatoma pagal elementų tvarką DOM'e.

Pavyzdys:

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

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