Retour "Calques en CSS"

Ex 1 --- Ex 2 --- Ex 3 --- Ex 4 --- Ex 5

exemple (4) : calques avec z-index et texte

Code placé dans HEAD ou fichier externe

<style type="text/css">

img.x
{
position: absolute ;
left: 40px ;
top :840px ;
z-index: 1 ;
}
img.x1
{
position: absolute ;
left: 40px ;
top: 840px ;
z-index: 2 ;
}
h2
{
position: absolute ;
left: 270px ;
top :840px ;
z-index: 0 ;
}

</style>

 

voici un titre qui en dit long

 

 

 

 

 

 

 

 

Tout est dans le positionnement.

En ajoutant une classe pour l'élément du texte et en fixant sa priorité à zéro "z-index:0" avec un "left: 220px", la présentation devient correcte et lisible.

"z-index:0" dans cet exemple peut être simplement supprimé de la déclaration, vu que le texte apparaît à l'extérieur des deux calques de référence. Le résultat sera identique.

Mais il reste encore des procédures à voir et pour cet entrée en matière, je vous recommande de réaliser beaucoup d'exemples au brouillon pour bien maîtriser le sujet.