CSS: propriété “z-index”

Aujourd'hui, nous voyons une propriété importante des CSS, En outre hérité de la dernière version, i CSS3. Je parle (car vous serez deviné dans le titre) propriété “z-index“.

Les propriétés “hauteur” et “largeur” hauteur et la largeur impostarenno, pendant que “z-index” nous avons besoin de déplacer des éléments dans la troisième dimension de profondeur (l'asse “Le”). La troisième dimension est perpendiculaire à l'écran et il sera plus facile à comprendre pour ceux qui connaissent des programmes impliquant l'utilisation de niveaux.

Imaginez l'écran comme une table sur laquelle se trouvait quelques cartes à jouer, de cette façon:

Dans cet exemple, chaque “lettre” est un “div”, tous “div” a une propriété “z-index” différent. Plus la valeur “z-index”, plus “lointain” seront les cartes, si la valeur est supérieure à la précédente, la div sera placé au-dessus de l'autre. Le CSS utilisée est la suivante:

 #boite1 {
  	frontière: 1px solide noir;
  	hauteur: 100px;
  	largeur: 80px;
	poste: absolue;
	à gauche: 15px;
	supérieur: 15px;
	fond: rouge;
	z-index: 1;
}

#boite2 {
  	frontière: 1px solide noir;
  	hauteur: 100px;
  	largeur: 80px;
	poste: absolue;
	à gauche: 20px;
	supérieur: 30px;
	fond: vert;
	z-index: 2;
}

#box3 {
  	frontière: 1px solide noir;
  	hauteur: 100px;
  	largeur: 80px;
	poste: absolue;
	à gauche: 25px;
	supérieur: 45px;
 	fond: bleu;
	z-index: 3;
}

#box4 {
  	frontière: 1px solide noir;
  	hauteur: 100px;
  	largeur: 80px;
	poste: absolue;
	à gauche: 30px;
	supérieur: 60px;
	fond: jaune;
	z-index: 4;
}

#box5 {
  	frontière: 1px solide noir;
  	hauteur: 100px;
  	largeur: 80px;
	poste: absolue;
	à gauche: 35px;
	supérieur: 75px;
	fond: magenta;
	z-index: 5;
}

Dans l'exemple suivant, la place a été attribuée à la valeur “6” la propriété “z-index” del box 1:

Expliquer la valeur “z-index” non seulement régler la position sur l'axe “Le”, mais commencer une nouvelle hiérarchie des éléments. La propriété “z-index” aussi, accepte les valeurs négatives et si les deux éléments ont la même valeur sera affichée selon l'ordre hiérarchique norme (au-dessus de ceux insérés après).

Pour ceux qui veulent expérimenter avec l'exemple montré, est publié en cette page.

Pas assez?

Ajouter une légende à la photo pop-up avec CSS3 CSS et la propriété “contour” Certaines polices, ou plutôt une série d'icônes GTranslate: un widget pour la traduction automatique Boutons du menu de navigation avec Sprites CSS