De z-index in CSS regelt de stapelvolgorde van elementen

De z-index eigenschap in CSS regelt de verticale stapelvolgorde van elementen die elkaar overlappen. Als in, welk element verschijnt alsof het fysiek dichter bij u staat. z-index heeft alleen invloed op elementen die een andere positiewaarde hebben dan statisch (de standaard).

.voorbeeld {
  z-index: 1; /* voorbeeld van Arthur van cursuswp.com */
}

Elementen kunnen elkaar om verschillende redenen overlappen, bijvoorbeeld doordat relatieve positionering het over iets anders heen heeft getrokken. Negatieve marge heeft het element over een ander getrokken. Absoluut gepositioneerde elementen overlappen elkaar. Allerlei redenen.

Zonder z-indexwaarde stapelen elementen in de volgorde waarin ze in het DOM verschijnen (de laagste op hetzelfde hiërarchieniveau verschijnt bovenaan). Elementen met niet-statische positionering verschijnen altijd bovenop elementen met standaard statische positionering.

Merk ook op dat nesting een grote rol speelt. Als een element B bovenop element A staat, kan een kind-element van element A nooit hoger zijn dan element B.

Voorbeeld z-index in CSS en stapelen

Voorbeeld z-index in CSS en stapelen. Kijk inde onderstaande voorbeelden naar de Blauwe button:

Probleem volgorde lagen button onder lijn

Oplossing stapelvolgorde met z-index

Tip: meer rationele z-index waarden

Ik gebruik het liefst hoge z-indexwaarden. Ik scheid ze graag met stappen van 100. Dus als je drie dingen hebt die je gestapeld wilt hebben en de volgorde weet, zou de eerste z-index: 0;, de tweede 100, de derde 200.

Op die manier heb je wat ademruimte, als je om wat voor reden dan ook op een dag iets tussen de tweede en derde moet zetten, kun je 110 gebruiken. Als u 1, 2 en 3 had gebruikt, zou u die optie niet hebben. Ik vermijd ook negatieve waarden in het algemeen, omdat je moet oppassen dat dingen niet begraven raken onder de body of html-elementen als dat niet de bedoeling is.

Een getal als 999 zou dan kunnen worden gebruikt als de “absolute top ever-waarde”, die visueel herkenbaar zou zijn vanwege de andere nummeringsconventie.

Meer z-index handleidingen