CSS z-index eigenschap

Definitie en gebruik

De z-index-eigenschap stelt de stapelingvolgorde van het element in. Elementen met een hogere stapelingvolgorde liggen altijd voor elementen met een lagere stapelingvolgorde.

Opmerking:Een element kan een negatieve waarde van de z-index-eigenschap hebben.

Opmerking:Z-index werkt alleen op geplaatste elementen (bijvoorbeeld position:absolute;)

Verklaring

Deze eigenschap stelt de positie van een geplaatste element langs de z-as in, de z-as wordt gedefinieerd als de as die loodrecht uitstrekt naar het beeldscherm. Als het een positief getal is, is het dichter bij de gebruiker, als het een negatief getal is, betekent dit dat het verder van de gebruiker is.

Zie ook:

CSS Handleiding:CSS Positionering

HTML DOM Referentiemanual:zIndex eigenschap

Voorbeeld

Stel de z-index van het beeld in:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Probeer het zelf

CSS Syntax

z-index: auto|number|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
auto Standaard. Stapelingvolgorde is gelijk aan die van het ouderlement.
number Stelt de stapelingvolgorde van het element in.
inherit Stelt dat de waarde van de z-index-eigenschap van het ouderlement moet worden geërfd.

Technische details

Standaardwaarde: auto
Inheritance: nee
Versie: CSS2
JavaScript Syntax: object.style.zIndex="1"

Meer voorbeelden

Z-index
Z-index kan worden gebruikt om een element achter een ander element te plaatsen.
Z-index
Het element in het voorbeeld heeft de Z-index gewijzigd.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0