z-index css volgorde html elementen op elkaar stapelen

De z-index eigenschap in CSS regelt de verticale stapelvolgorde van elementen die elkaar overlappen en welk element bovenop verschijnt. Lees handleiding.

Logo cursus traing wordpress

z-index css volgorde html elementen op elkaar stapelen

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.

basis z index css volgorde stapelen html elementen op elkaar wordpress
Basis z-index css volgorde op elkaar stapelen html elementen in wordpress

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.

context z index css volgorde stapelen html elementen op elkaar website
Context z index css stapelen met html elementen op website

Voorbeeld z-index in CSS en stapelen

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

Probleem volgorde lagen button onder lijn

z index css volgorde stapelen overlap html elementen op elkaar voorbeeld
Probleem volgorde stapelen overlap html elementen op elkaar

Oplossing stapelvolgorde met z-index

z index css volgorde stapelen overlap html elementen op elkaar voorbeeld
Oplossing met z-index css volgorde stapelen (voorbeeld)

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


Wil je meer details over z-index css volgorde html elementen op elkaar stapelenof info?

Wil je meer informatie? Veel web-designers met interesse in z-index css volgorde html elementen op elkaar stapelen bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website of webshop beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website of webshop sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over z-index css volgorde html elementen op elkaar stapelen?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, z-index css volgorde html elementen op elkaar stapelen en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven