Le positionnement en CSS
CHAPITRE 7
119
Quel positionnement adopter ?
Après ce survol des techniques de positionnement en CSS, se pose la question du
choix. Placement classique (dans le flux) ; positionnements absolus, relatifs, fixes ou
flottants : il est difficile d’avoir les idées claires et de dégager des préférences.
Ce récapitulatif indicatif est le fruit de mon interprétation et de mon expérience personnelles. D’autres méthodes sont parfois justifiées ; tout dépend de l’utilisation du
document et de l’objectif poursuivi. Ces règles ne sont donc en nulle manière parole
d’Évangile.
Quand positionner dans le flux ?
C’est le placement classique, suivant la structure hiérarchique du code HTML.
Chaque élément se place par rapport à son frère aîné dans le conteneur de leur
parent, en dessous (cas des blocs) ou à côté (cas des éléments en ligne).
Par défaut, le premier enfant prend place en haut à gauche de son parent. Si c’est un
bloc, il occupera toute la largeur disponible. Sinon, il se limitera à l’espace nécessaire
à son contenu. Les marges externes (margin) ou internes (padding) permettent de
positionner précisément chacun des éléments.
C’est la technique à privilégier dans la plupart des cas, principalement pour les éléments internes de la page : textes, titres, images d’illustration, etc. On y recourra sans
artifices pour placer tout le contenu, dont les éléments en ligne. C’est en effet le positionnement le plus souple, le plus fluide, et il s’affichera convenablement sur tous les
écrans et supports.
Quand positionner en relatif ?
Ce n’est qu’un cas particulier du positionnement en flux auquel on apporte des décalages à l’aide des propriétés top, right, bottom, et left. Un élément relatif demeure
donc dépendant de ses frères dans le flux, mais cela est souvent mal compris et cette
technique incorrectement utilisée.
J’utilise rarement ce mode de positionnement, auquel je ne trouve que deux applications pratiques :
• décaler ou superposer deux éléments sans avoir recours à un positionnement hors
du flux ;
• obtenir un bloc conteneur « positionné » pour y placer d’autres éléments (nous verrons un cas concret dans le chapitre 8, consacré au centrage des éléments en CSS).
CHAPITRE 7
119
Quel positionnement adopter ?
Après ce survol des techniques de positionnement en CSS, se pose la question du
choix. Placement classique (dans le flux) ; positionnements absolus, relatifs, fixes ou
flottants : il est difficile d’avoir les idées claires et de dégager des préférences.
Ce récapitulatif indicatif est le fruit de mon interprétation et de mon expérience personnelles. D’autres méthodes sont parfois justifiées ; tout dépend de l’utilisation du
document et de l’objectif poursuivi. Ces règles ne sont donc en nulle manière parole
d’Évangile.
Quand positionner dans le flux ?
C’est le placement classique, suivant la structure hiérarchique du code HTML.
Chaque élément se place par rapport à son frère aîné dans le conteneur de leur
parent, en dessous (cas des blocs) ou à côté (cas des éléments en ligne).
Par défaut, le premier enfant prend place en haut à gauche de son parent. Si c’est un
bloc, il occupera toute la largeur disponible. Sinon, il se limitera à l’espace nécessaire
à son contenu. Les marges externes (margin) ou internes (padding) permettent de
positionner précisément chacun des éléments.
C’est la technique à privilégier dans la plupart des cas, principalement pour les éléments internes de la page : textes, titres, images d’illustration, etc. On y recourra sans
artifices pour placer tout le contenu, dont les éléments en ligne. C’est en effet le positionnement le plus souple, le plus fluide, et il s’affichera convenablement sur tous les
écrans et supports.
Quand positionner en relatif ?
Ce n’est qu’un cas particulier du positionnement en flux auquel on apporte des décalages à l’aide des propriétés top, right, bottom, et left. Un élément relatif demeure
donc dépendant de ses frères dans le flux, mais cela est souvent mal compris et cette
technique incorrectement utilisée.
J’utilise rarement ce mode de positionnement, auquel je ne trouve que deux applications pratiques :
• décaler ou superposer deux éléments sans avoir recours à un positionnement hors
du flux ;
• obtenir un bloc conteneur « positionné » pour y placer d’autres éléments (nous verrons un cas concret dans le chapitre 8, consacré au centrage des éléments en CSS).