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 op elementen met een lagere index gestapeld. De Z-index werkt op de meeste gepositioneerde elementen, zoals absoluut, relatief, vast, plakkerig en overerven. Met de eigenschap position kunt u de positionering van een component wijzigen.
Waarom Z-index gebruiken?
Componenten kunnen om verschillende redenen overlappen, bijvoorbeeld wanneer de relatieve positionering deze over een andere heen duwt, een negatieve rand de component over een andere heeft gesleept, of wanneer een uitgelijnde component overlapt.
Componenten stapelen zich op in de volgorde waarin ze in de DOM verschijnen, zonder een z-indexwaarde. Niet-statische elementen verschijnen altijd bovenop de standaard statische positionering. Nestelen speelt ook een belangrijke functie. Als component A bijvoorbeeld op Component B zit, kan een onderliggend element van Component B nooit hoger zijn dan component A.
Z-index positie-eigenschappen
Verschillende positieparameters bepalen de keuze van een webontwerper voor de plaatsingsstrategie van elementen. De eigenschap position moet worden gedefinieerd voor elk object dat u wilt verplaatsen met een z-index, wat een van de redenen is waarom de z-index complex kan zijn.
De attributen top, bottom, right en left worden gebruikt om elementen te positioneren. De eigenschappen werken echter pas als de eigenschap position is ingesteld. Bovendien gedragen eigenschappen zich op basis van de positiewaarde anders.
Z-index werkt met waarden met zes posities, zoals eerder vermeld. Laten we elk van hen eens bekijken.
- Absoluut
Het element wordt uit de documentstroom verwijderd en andere items gedragen zich alsof het er niet is, waarbij alle positionele eigenschappen er invloed op hebben.
- 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 aan dat de locatie van het element in die richting is “geduwd”.
- Vast
Het element wordt gepositioneerd ten opzichte van de viewport of het daadwerkelijke browservenster van de gebruiker; daarom heeft scrollen geen effect.
- Kleverig
De elementwaarde wordt als relatief beschouwd totdat de schuifpositie van het kijkvenster een bepaalde drempel bereikt. Het element neemt nu een vaste plaats in waar het moet blijven.
- Erven
Omdat de positiewaarden geen cascade omvatten, kunnen ze worden gebruikt om dit te forceren en de positioneringswaarde van de ouder te verkrijgen.
Hoe gebruik je de Z-index in Elementor?
In Elementor kunt u 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!
Houd er rekening mee dat als u van plan bent veel lagen te gebruiken, u elke Z-index moet bijhouden. Je kunt behoorlijk ingewikkelde overlappende secties ontwerpen, zoals we in de volgende sectie zullen zien, maar als je weet welke Z-indexwaarde aan welk element wordt gegeven, wordt het een stuk eenvoudiger.
Conclusie
Ik hoop dat je wat basiskennis hebt gevonden over het gebruik van Z-index voor je WordPress Elementor-webontwerp. Vergeet niet contact op te nemen bij verdere vragen. Ook voor gerelateerde artikelen over best practices van WordPress, technieken voor probleemoplossing en andere tips op onze blogpagina .
Seahawk Media echter het beste van alle services om aan uw end-to-end WordPress-behoeften te voldoen. Neem contact met ons of bekijk onze blogpagina voor meer inzichten.
