La présentation en couches

La propriété "z-index"

• En CSS2, chaque boîte reçoit un emplacement selon trois dimensions. En plus de leurs positions horizontales et verticales, les boîtes s'échelonnent le long d'un "axe-z" et s'empilent les unes au-dessus des autres dans la mise en forme.
• Les positions sur l'axe-z sont particulièrement importantes lors des chevauchements visuels des boîtes.
• Chacune des boîtes reçoit un entier pour son niveau, cet entier représentant la position de la boîte sur l'axe-z, en rapport avec les autres boîtes de ce contexte.
• La propriété z-index définit ce niveau
• Exemple :

  .projet {
    position:relative;
    top:-120px;
    left:140px;
    text-weigth:bold;
    font-size:24px;
    letter-spacing: 1.2em;
    z-index:1
  }
    ...
  <div class="projet">Version préliminaire</div>

  Version

  préliminaire

• Exemple avec une image

Les bulles d'information

On peut utiliser la propriété z-index pour définir les bulles d'information.

Exemple (basé sur le tutoriel de Patrick Perron) :

a.bulle {
  position:relative;
  z-index:10;
  color:#000;
  font-family:Arial, Helvetica, sans-serif;
}

a.bulle:hover {
  z-index:20;
}

a.bulle span {
  display:none;
}

a.bulle:hover span {
  /* l'élément span apparaîtra avec l'effet hover */
  display:block;
  position:absolute;
  top:18px;
  left:10px;

  /* Éléments pour positionner le texte dans la bulle */
  padding-left:25px;
  padding-top:18px;
  padding-bottom:5px;
  padding-right:8px;
  width:205px;
  height:45px;
  background-color:white;

  /* Style du character dans la bulle */
  font-family:Arial, Helvetica, sans-serif;
  font-weight:normal;
  font-style:italic;
  font-size:10px;
  color:#9966FF;
  text-decoration:none;
  text-align:justify;

  background-image:url("css/img/css_ex_bulle_fond.png");
}

Code HTML :

  <a href="http://www.netmaths.net/Default.aspx" class="bulle">Netmaths
    <span>
      est le meilleur moyen de pratiquer mes maths sur Internet et de
      vérifier ce que je sais d'une façon amusante
    </span>
  </a>
  contient des tonnes d'exercices, de  démos et d'explos de qualité.

Dans le navigateur :