Wat is z-index en hoe wordt het gebruikt in webontwikkeling?

z-index — is een CSS-eigenschap die de stapelvolgorde (stacking) van elementen bepaalt op basis van hun positie op de Z-as. Elementen met hogere z-index-waarden worden boven elementen met lagere waarden weergegeven.

Het wordt gebruikt om de diepte van de stapeling van elementen met positionering te beheren (d.w.z. elementen waarvan de eigenschap position waarden heeft anders dan static): relative, absolute, fixed, sticky.

Belangrijke punten van gebruik:

• Elementen met statische positionering (position: static;) nemen niet deel aan de stapelcontext en negeren z-index.
• De waarde van z-index wordt alleen toegepast op elementen die een nieuwe stapelcontext creëren. Deze context wordt bijvoorbeeld gecreëerd door gebruik te maken van position met waarden anders dan static, of door andere CSS-regels (zoals opacity < 1).
• Binnen dezelfde stapelcontext worden elementen met een hogere z-index bovenop geplaatst.
• Geneste stapelcontexten worden als één geheel gestapeld binnen de oudercontext.
• Zonder expliciete toewijzing van z-index wordt de stapelvolgorde bepaald door de volgorde van elementen in de DOM.

Voorbeeld van gebruik:

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

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