Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> La propriété CSS z-index

La propriété CSS z-index

Introduction à la propriété CSS z-index

Il est très fréquent d'avoir des blocs superposés en cas du recours aux positionnements relatif, fixé et absolu. C'est ici qu'intervient la propriété CSS z-index pour ordonner les boîtes superposées en raison d'un positionnement relatif, absolu ou fixé. Ladite propriété n'intéresse pas les boîtes qui suivent un schéma de positionnement statique.

Dans les chapitres précédents on a appris à positionner en jouant sur les indexes 'x' et 'y' par les propriétés CSS de décalage (top, right, bottom et left). La propriété CSS z-index permet de positionner selon l'index 'Z' c'est-à-dire la troisième dimension.

Rappelez-vous qu'on pourra jamais avoir deux blocs à la fois superposés et positionnés en mode statique. Dans le cas où deux ou plusieurs blocs sont empilés, les nouveaux éléments apparaissant dans le code XHTML couvrent les anciens, mais peuvent quand même en afficher une partie à travers leur arrière-plan transparent (fond sans couleur ou image).

La propriété CSS z-index permet de personnaliser l'ordre d'empilement par défaut que je viens de détailler ci-dessus. En fait vous pouvez lui affecter n'importe quel nombre entier, pour redéfinir l'ordre d'empilement. Dans ce cas les éléments dont le z-index est plus élevé couvrent ceux dont le z-index est inférieur.

En cas de superposition de deux éléments A et B, A étant positionné en mode statique et B en mode relatif, absolu ou fixé. Le bloc A sera condamné à apparaître toujours en-dessous du bloc B, même si vous redéfinissez l'ordre d'empilement avec la propriété CSS 'z-index'. Bref on pourra jamais rencontrer un élément positionné en mode statique qui couvre un autre élément positionné en mode absolu, relatif ou fixé.

Un bloc qui couvre un élément, laisse apparaître toutefois une partie de lui, à travers son arrière-plan transparent (les propriétés CSS background-color et background-image). Si vous spécifiez une couleur ou image de fond, alors dans ce cas l'arrière-plan n'est plus transparent et la boîte sera à 100% opaque.

Faites attention, les valeurs passées à la propriété CSS z-index ont une portée limitée dans chaque conteneur parent, et ne s'appliquent pas donc à tout le document. En fait la propriété CSS z-index permet de définir l'ordre d'empilement par rapport aux autres éléments appartenant au même conteneur parent.

Lorsque deux blocs superposés ont reçu le même z-index, l'ordre d'empilement sera alors établi par l'ordre d'apparition des calques dans le code source.

Exemple de l'utilisation de la propriété CSS z-index

Code XHTML/CSS

<body>
  <p style="position: absolute; top: 4px; left: 3px; z-index: 2; border: solid;">bloc 1 </p>
  <p style="position: absolute; top: 12px; left: 18px; z-index: 1; border: solid;">bloc 2 </p>
</body>

Explications

Normalement le bloc 2 est censé apparaître en premier-plan, mais grâce à la propriété de style 'z-index' on a changé cette conduite par défaut. Dans notre exemple le bloc 2 sera couvert par le bloc 1, cependant une partie de la boite 2 va apparaître à travers le fond transparent du bloc 1.

Vous pouvez assigner à 'z-index' n'importe quelle valeur entière "1, 2 ,3 ,4" ou bien "10, 20, 30, 40". Des valeurs non successives sont parfois plus utiles au cas où on veut ajouter d'autres calques, on sait jamais

Bon, on en a terminé avec le positionnement, le prochain chapitre portera sur la propriété CSS display.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau