Regulering van de z-overlapping van elementen in CSS

De stapelvolgorde van elementen kan gereguleerd worden met behulp van de eigenschap z-index, die positieve of negatieve gehele getallen, of nul, als waarde aanneemt. De eigenschap werkt alleen voor elementen waarvan de position eigenschap is ingesteld op absolute, fixed of relative.

Bij gebruik van deze eigenschap is de regel voor het stapelen van elementen als volgt: het element met de hoogste z-index waarde komt bovenop.

Laten we de stapelvolgorde van de elementen uit het vorige voorbeeld veranderen. Hiervoor geven we het eerste element een hogere z-index waarde dan het tweede, bijvoorbeeld zo:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

Resultaat van de code: