Les feuilles de styles CSS
DEUXIÈME PARTIE
114
Les valeurs de z-index n’ont aucune interprétation en absolu. Seule compte leur
comparaison, l’élément de valeur la plus élevée prenant place au sommet des zones de
superposition (figure 7-14).
N’abusez pas de ces changements de profondeur : elles sont rarement nécessaires
dans un document bien construit et doté d’une structure HTML cohérente.
Le positionnement flottant
On positionne un élément en flottant avec une déclaration float: left ou float:
right. Il est alors retiré du flux normal pour prendre place à gauche (respectivement
à droite) du bloc qui le contient : c’est devenu un « flottant ». L’élément qui le suit
s’écoulera alors dans l’espace ainsi laissé libre, en épousant sa forme.
Pour mettre cet effet en évidence, il faut allonger le second paragraphe de l’exemple
précédent et l’autoriser à occuper toute la largeur disponible :
Avec les styles :
Figure 7–14
Profondeur et
z-index (II)

div {
width: 300px;
height: 200px;
background: yellow;
}