Le positionnement en CSS
CHAPITRE 7
121
Tableau récapitulatif
Application pratique
Chaque navigateur propose d’afficher le code HTML des pages web. Sous Firefox,
on suivra pour cela le menu Affichage/Code source de la page sur Firefox ; avec
Internet Explorer, c’est plus simplement Affichage/Source. Comme vous ne tarderez pas à le remarquer, chaque partie de la page porte un identifiant qui la distingue clairement dans le document HTML. La feuille de style principale du style
est un document disponible à l’adresse :
Bhttp://www.eyrolles.com/layout/librairie/css/default.css
Tableau 7–1 Choix du positionnement
Mode de
positionnement
Conteneurs
et blocs
Contenu et
éléments internes
Centrage
d’éléments
Spécificités
Dans le flux courant
Non
Oui
Oui
Reste dans le flux. Se positionne
par rapport aux éléments parent et
frères.
Position relative
Non
Oui
Oui
Décalage par rapport au flux avec
les propriétés top, right,
bottom et left.
Position fixe
Oui
Non
Oui
Sort du flux. Pose des problèmes
sur Internet Explorer inférieur à IE7.
Position absolue
Oui
Non
Oui
Sort du flux. Se place par rapport
au premier ancêtre positionné. Permet les superpositions.
Placement flottant
Oui
Oui
Non
Sort du flux. Le flottant « centré »
n’existe pas. Attention à certains
défauts d’affichage.
Apprenons par l’exemple en étudiant des sites conçus en CSS.
Le site de la librairie Eyrolles, réalisé par Olivier Meunier, est un excellent
exemple pour s’inspirer des techniques et méthodes CSS :
Bhttp://www.eyrolles.com/
Distinguons les parties principales de la page et déterminons le mode de positionnement de chacune.