TheJoe.it Dans le (ouvrir) Source

4May/130

CSS: propriété “z-index”

as

Aujourd'hui, nous voyons une propriété importante des CSS, également hérité de la dernière version de, 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 sont familiers avec les plans pour 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;
}

Ce qui suit, la place a été attribuée à la valeur "6" la propriété "z-index" del box 1:

Expliquer la valeur "z-index" non seulement de fixer la position sur l' "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 souhaitent faire des essais avec l'exemple ci-, est publié en cette page.

Content de cet article?

Inscrivez vous à notre fil rss!

Sur

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.