Le positionnement en CSS

En HTML, chaque élément est considéré comme une boîte.

Différents "positionnement" peuvent être choisis :

• Le flux courant
• Le positionnement relatif
• Le positionnement absolu
• Le positionnement flottant
• Quel positionnement choisir

Quel positionnement adopter ?

Dans le flux

C'est le placement classique. Chaque élément se place par rapport à son frère dans le conteneur de son parent, en dessous pour les blocs ou à coté pour les éléments en ligne. Un bloc occupe toute la largeur disponible. Les marges externes (margin) ou internes (padding) permettent de positionner précisément chacun des éléments. C'est le positionnement le plus souple, le plus fluide, et il s'affichera convenablement sur tous les écrans et supports.

positionnement relatif

Ce n'est qu'un cas particulier du positionnement dans le flux auquel on apporte des décalages (top, right, bottom, et left). On l'utilise :

• pour décaler ou superposer deux éléments sans avoir recours à un positionnement hors du flux
• pour obtenir un bloc conteneur "positionné" qui contiendra d'autres éléments

positionnement absolu ou fixe

Ces positionnements font sortir du flux. Le positionnement absolu permet de centrer. Le positionnement fixe permet à une zone d'être toujours fixe sur l'écran.

positionnement flottant

L'élément sort du flux mais reste dépendant des autres éléments flottants. On peut donc aligner des éléments cote à cote. On peut donc l'utiliser pour les colonnes ou les illustrations.