Les feuilles de styles CSS
DEUXIÈME PARTIE
108
Cet exemple illustre l’apport du positionnement relatif, où un élément peut prendre
place par-dessus des éléments frères. C’est toutefois une technique à manier avec
précaution : on n’y manipule que des décalages, chaque élément restant dépendant de
ses frères.
Les techniques classiques de positionnement par marges répondent à la majorité des
besoins. Le positionnement relatif n’est vraiment nécessaire que pour des décalages
avec superposition. Un élément « positionné » (ici, en relatif ) présente aussi des intérêts pour les positionnements absolu et fixe. Positionner un élément lui permet de
devenir conteneur d'autres éléments de contenu positionnés.
Les positionnements absolu et fixe
Ils s’appliquent à tout élément doté des déclarations position: absolute ou
position: fixed, qui sort alors du flux pour devenir « positionné ». Les boîtes ainsi
retirées du flux normal n’ont plus aucun effet sur le calcul des placements des autres
éléments de la même fratrie, et on détermine leur position par les propriétés top,
right, bottom et left.
Ces dernières s’interprètent comme en positionnement relatif et correspondent à des
décalages. Toutefois, la position de base est calculée par rapport à un bloc conteneur et
non pas en décalage de la position théorique dans le flux normal. Le boîte conteneur de
référence est celle du premier élément ancêtre positionné (en relatif, fixe ou absolu).
width: 150px;
height: 50px;
background: green;
}
Figure 7–9
Positionnement relatif
MISE EN PAGE Impact du positionnement relatif
L’application du positionnement relatif à un élément n’affecte pas les boîtes qui l’entourent ; sa place
réservée est celle du positionnement dans le flux normal.