Médiaforma

All posts tagged z-index

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La propriété CSS3 opacity permet de définir la transparence d’un élément.

Pour illustrer cette propriété, nous allons superposer deux images et donner un effet de transparence à celle qui est au-dessus de l’autre. Voici les images utilisées :


Les deux images sont insérées dans une balise <div>. La première est de classe dessus et la deuxième de classe dessous.

Il ne reste plus qu’à définir les deux classes pour mettre en place l’effet de transparence.

Pour que les deux images se superposent, on les positionne de façon absolue dans la balise <div>. Le z-index de l’image de classe dessus est initialisé à 1 et son opacité à 0.6.

Le z-index de l’image de classe dessous est initialisé à 0. Cette image sera donc au-dessous de l’autre, qui a un z-index égal à 1.

Exécutons ce code. Le chat apparaît bien en avant-plan et on peut voir au travers :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Vous utiliserez la propriété CSS z-index pour définir la position relative de plusieurs éléments empilés. Plus la valeur affectée à la propriété z-index d’un élément est élevée, plus cet élément se trouve en avant-plan.

Pour illustrer cette propriété, nous allons empiler plusieurs rectangles colorés dans une balise <div> et choisir leur ordre de superposition.

Le code HTML est élémentaire. Il contient une balise <div> conteneur ligne 36 et trois balises <div> enfants lignes 37 à 39.

Examinons le code CSS.

Pour limiter l’écriture, les propriétés communes aux trois classes sont rassemblées entre les lignes 5 et 10. Ainsi, les éléments de classe rectangle1, rectangle2 et rectangle3 seront tous trois positionnés en absolu et auront une dimension de 200×150 pixels.

Les caractéristiques propres à chaque classe sont définies :

  • entre les lignes 11 et 17 pour le premier rectangle ;
  • entre les lignes 18 et 24 pour le deuxième rectangle ;
  • entre les lignes 25 et 31 pour le troisième rectangle.

La propriété z-index de la balise <div> de classe rectangle1 a pour valeur 1. Celle de la balise <div> de classe rectangle2 a pour valeur 2 et celle de la balise <div> de classe rectangle3 a pour valeur 3. La balise de classe rectangle3 se trouve donc devant la balise de classe rectangle2, el la balise de classe rectangle2 se trouve devant la balise de classe rectangle1.