CSS agit dans trois dimensions : la hauteur, la largeur et la profondeur. Nous avons vu les deux premieres dimensions dans les lecons precedentes. Dans celle-ci, nous allons apprendre a ranger les elements en couches. Pour faire court, l'ordre dans lequel les elements recouvrent les autres.
Pour cela, on peut assigner un numero (z-index) a chaque element. Le systeme est tel qu'un element de numero superieur
recouvre ceux de numero inferieur.
Soit une suite royale dans une main de poker. On peut la presenter de telle sorte que chaque carte ait un numero z-index :
Ici les numeros se suivent (de 1 a 5), mais on peut obtenir le meme resultat avec cinq numeros differents. C'est la sequence chronologique des numeros (l'ordre) qui importe.
Le code dans l'exemple avec les cartes pourrait etre celui-ci :
#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}
La methode est relativement simple mais les possibilites nombreuses. On peut placer des images sur du texte, ou du texte sur du texte, etc.
Les couches peuvent servir dans beaucoup de situations. Par exemple, essayez d'utiliser z-index
pour creer des effets dans les titres au lieu de les faire en image. Primo, le chargement du texte est plus rapide, et secundo,
cela donne un meilleur referencement dans les moteurs de recherche.