z-index

Résumé

La propriété CSS z-index définit l'ordre-z (empilement selon l'axe Z) d'un élément et de ses descendants. Quand des éléments se chevauchent, l'ordre-z définit lequel recouvre l'autre. Un élément avec un niveau z-index élevé recouvre généralement celui dont le niveau z-index est bas.

Syntaxe

z-index: auto | <entier> | inherit

Valeurs

auto 
L'élément est généré dans le même plan que son parent. Cela ne crée pas de nouveau contexte d'empilement local.
<entier> 
L'élément est dessiné à l'ordre-z défini. Cela crée un nouveau contexte d'empilement local, ce qui signifie que tous ses descendants seront aussi dessinés à ce niveau de z-index. Cela veut dire que les niveaux z-index des descendants ne seront pas comparés avec ceux situés au dehors de celui-ci.

Exemples

position:relative; z-index:1; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9
position:absolute; z-index:2; left:60px; top:3em;

Notes

Des valeurs négatives de z-index sont supportées correctement depuis Gecko 1.9 / Firefox 3. Auparavant, les précédentes versions implémentaient le comportement CSS 2, pas celui de CSS 2.1 qui est compatible avec d'autres navigateurs.

Spécifications

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 1.0 (1.7 ou moins)

4.0

4.0

1.0
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, FredB, tregagnon, Fredchat, Kyodev, Lapinkiller
Dernière mise à jour par : teoli,
Masquer la barre latérale