CSS z-index Eigenschap
Voorbeeld
Stel de z-index voor een afbeelding in:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Definitie en gebruik
De z-index
eigenschap specificeert de stapelvolgorde van een element.
Een element met een grotere stapelvolgorde staat altijd voor een element met een lagere stapelvolgorde.
Opmerking: z-index
werkt alleen op gepositioneerde elementen (positie: absoluut, positie: relatief, positie: vast of positie: plakkerig) en flex-items (elementen die directe kinderen zijn van
display:flex- elementen).
Opmerking: als twee gepositioneerde elementen elkaar overlappen zonder een z-index
specificatie, wordt het laatst gepositioneerde element in de HTML-code bovenaan weergegeven.
Standaardwaarde: | auto |
---|---|
geërfd: | Nee |
Animeerbaar: | Ja. Lees over animeren |
Versie: | CSS2 |
JavaScript-syntaxis: | object .style.zIndex="-1" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
CSS-syntaxis
z-index: auto|number|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Gerelateerde pagina's
CSS-zelfstudie: CSS-positionering
HTML DOM-referentie:
zIndex-eigenschap