Accueil    CSS    Propriété z-index
 



style css z-index  Style CSS z-index

«  Partie précédente  |  Index   


La propriété z-index est utilisée pour modifier l'ordre d'empilement des éléments html du document lorsque ceux-ci se superposent (partiellement ou totalement). La valeur numérique qui lui est associée indique cette priorité :
si deux éléments se superposent, celui qui sera affiché par dessus l'autre sera celui avec la valeur associée à z-index la plus élevée.

Lorsque plusieurs éléments se superposent et que la propriété z-index n'est pas définie, le comportement par défaut est que le dernier élément traité s'affiche par dessus les autres.



Propriétés pour le style z-index :




Propriété Définition Valeurs CSS
z-index Priorise l'ordre d'empilement d'éléments se superposant auto
valeur
inherit
CSS 1


Exemple d'utilisation du style css z-index :




Exemple d'utilisation de la propriété z-index pour superposer des éléments :

<div style="position:relative; width:320px; height:180px;">
   <div style="z-index:10; border:solid 1px black; position:absolute;
      top:20px; left:20px; width:200px; height:80px;">
      D I V 1
   </div>
   <div style="z-index:30; border:solid 1px black; position:absolute;
      top:50px; left:50px; width:200px; height:80px;">
      D I V 2
   </div>
   <div style="z-index:20; border:solid 1px black; position:absolute;
      top:80px; left:80px; width:200px; height:80px;">
      D I V 3
   </div>
</div>

La seconde <div> à le z-index le plus élevé et s'affiche donc par dessus les deux autres.


Exemple d'utilisation de la propriété z-index pour superposer des éléments :

DIV 1 : z-index:10
DIV 2 : z-index:30
DIV 3 : z-index:20