Cookie

Attention


Cet article a été publié il y a plus d'un an, il peut y avoir des développements été.
S'il vous plaît prendre en compte.

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?


TheJoe

Je garde ce blog comme un hobby par 2009. Je suis passionné de graphisme, la technologie, logiciel Open Source. Parmi mes articles ne sera pas difficile de trouver de la musique, et quelques réflexions personnelles, mais je préfère la ligne directe du blog principalement à la technologie. Pour plus d'informations me contacter.

Laisser un commentaire

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *

Ce site utilise Akismet pour réduire le spam. Découvrez comment vos données de commentaire est traité.