Propriété CSS z-index
Exemple
Définissez le z-index d'une image :
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Définition et utilisation
La z-indexpropriété spécifie l'ordre de pile d'un élément.
Un élément avec un ordre de pile supérieur est toujours devant un élément avec un ordre de pile inférieur.
Remarque : z-index ne fonctionne que sur les éléments positionnés (position : absolue, position : relative, position : fixe ou position : collante) et les éléments flexibles (éléments qui sont des enfants directs des
éléments display:flex ).
Remarque : Si deux éléments positionnés se chevauchent sans z-index
spécification, l'élément positionné en dernier dans le code HTML sera affiché en haut.
| Valeur par défaut: | auto |
|---|---|
| Hérité: | non |
| Animable : | Oui. En savoir plus sur l'animation |
| Version: | CSS2 |
| Syntaxe JavaScript : | objet .style.zIndex="-1" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
Syntaxe CSS
z-index: auto|number|initial|inherit;
Valeurs de propriété
| 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 |
Pages connexes
Tutoriel CSS : Positionnement CSS
Référence HTML DOM :
propriété zIndex