Een Z-index is een CSS-attribuut dat de verticale stapelvolgorde van overlappende HTML-componenten beïnvloedt, waardoor ze dichter bij de kijker lijken.
Elementen met een hogere index worden bovenop elementen met een lagere index gestapeld. De Z-index werkt op de meeste gepositioneerde elementen, zoals een absolute, relatieve, vaste, sticky en inherit. Met de position eigenschap kun je de positionering van een component wijzigen.
Waarom Z-index gebruiken?
Componenten kunnen elkaar om verschillende redenen overlappen, bijvoorbeeld wanneer de relatieve positionering de component over een andere duwt, een negatieve rand de component over een andere heeft gesleept, of wanneer een uitgelijnde component elkaar overlapt.
Componenten worden gepositioneerd in de volgorde waarin ze in het DOM verschijnen, zonder z-indexwaarde. Niet-statische elementen verschijnen altijd bovenop de standaard statische positionering. Nesting speelt ook een belangrijke functie. Als component A bijvoorbeeld op component B zit, kan een child-element van component B nooit hoger staan dan component A.
Z-index Positie-eigenschappen
Verschillende positieparameters bepalen de keuze van een webdesigner voor de plaatsingsstrategie van een element. De positie-eigenschap moet worden gedefinieerd voor elk object dat je wilt verplaatsen met een z-index.
De boven-, onder-, rechts-, en links-attributen worden gebruikt om elementen te positioneren. De eigenschappen zullen echter pas functioneren als de positie eigenschap is ingesteld. Bovendien, gebaseerd op de positie waarde, gedragen de eigenschappen zich verschillend.
Z-index werkt met zes-positie waarden, zoals eerder vermeld. Laten we eens kijken naar elk van hen.
- Absoluut
Het element wordt verwijderd uit de stroom van het document, en andere items gedragen zich alsof het er niet is, met alle positionele eigenschappen die het beïnvloeden.
- Relatief
De oorspronkelijke positie van een element blijft in de documentstroom, maar de links/rechts/boven/onder/z-index functioneert nu. De positionele attributen geven de plaats van het element aan die in die richting is "geduwd".
- Vast
Het element wordt gepositioneerd ten opzichte van de viewport of het eigenlijke browservenster van de gebruiker; scrollen heeft dus geen effect.
- Sticky
De waarde van het element wordt als relatief gezien totdat de scrollpositie van de viewport een bepaalde drempel bereikt. Het element neemt nu een vaste plaats in waar het moet blijven.
- Erven
Omdat de positiewaarden de cascade niet omvatten, kunnen ze worden gebruikt om het te dwingen en de positiewaarde van de ouder over te nemen.
Hoe gebruik je Z-index in Elementor?
In Elementor kun je Z-index gebruiken door naar het geavanceerde instellingenmenu van een component of element te gaan en er een waarde voor op te geven. Het is een fluitje van een cent!
Vergeet niet dat als je van plan bent veel lagen te gebruiken, je elke Z-index moet bijhouden. Je kunt vrij ingewikkelde overlappende secties ontwerpen, zoals we in het volgende deel zullen zien, maar weten welke Z-indexwaarde aan welk element wordt gegeven maakt de zaken een stuk eenvoudiger.
Conclusie
Ik hoop dat u wat basis begrip heeft gevonden van hoe u Z-index kunt gebruiken voor uw WordPress Elementor web design. Vergeet niet om contact op te nemen in geval van verdere vragen. Ook, om verwante artikelen over WordPress best practices, het oplossen van problemen technieken, en andere tips op onze blog pagina te leren kennen.
Wij van Seahawk Media bieden echter het beste van alle diensten om aan uw end-to-end WordPress behoeften te voldoen. Neem contact met ons op of bekijk onze blog pagina voor meer inzichten.