Kas ir z-index un kā tas tiek izmantots tīmekļa izstrādē?

z-index — ir īpašība CSS, kas nosaka elementu slāņu (stacking) kārtību atkarībā no to atrašanās vietas Z ass. Elementi ar lielāku z-index vērtību tiek attēloti virs elementiem ar mazāku vērtību.

Tiek izmantots, lai pārvaldītu elementu, kuriem ir pozicionēšana (t.i., position īpašība ir cita par static), slāņu dziļumu: relative, absolute, fixed, sticky.

Galvenie lietošanas punkti:

• Statiskās pozīcijas elementi (position: static;) nepiedalās slāņu kontekstā un ignorē z-index.
• z-index vērtība attiecas tikai uz elementiem, kas rada jaunu slāņu kontekstu. Šis konteksts tiek radīts, piemēram, izmantojot position ar vērtībām, kas nav static, vai ar citām CSS noteikumiem (piem., opacity < 1).
• Tajā pašā slāņu kontekstā elementi ar lielāku z-index ir virsū.
• Iekšēji iekļautie slāņu konteksti tiek sakārtoti kā viena vienība vecāku kontekstā.
• Bez skaidras z-index piešķiršanas kārtība ir noteikta pēc elementu secības DOM struktūrā.

Piemērs:

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

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