Positionnement en CSS

Par défaut, les éléments se positionnent dans l'ordre où ils sont déclarés dans le fichier HTML : dans le flux.

Certains éléments occupent la largeur totale de leur conteneur, ce sont les éléments de type block : h1, h2…, div, ul, ol, table…

Il est possible de modifier les marges, la largeur ou la hauteur des éléments de type block.

D'autres viennent se positionner les uns à côté des autres, sans changer de ligne, ce sont les éléments in-line. : span, a, abbr, img etc…

Un élément de type inline peut être transformé en block en attribuant `display:block` ; à l'inverse, un élément block peut être positionné inline.

La valeur inline-block du display peut être utilisée pour donner à des éléments restant inline les caractèristiques des blocks (propriétés hauteur, largeur, marges modifiables) (voir display inline-block).

La position d'un élément dans le flux est par défaut static.

Permet de décaler un élément par rapport à sa position initiale dans le flux, en ajustant ensuite les propriétés top ou left:

position: relative;
top: 40px; left: 40px;

L'élément en position absolute est retiré du flux (il n'influence donc plus les autres éléments). Sa position est fixée par les propriétés top et left au sein de son premier parent positionné trouvé (à défaut dans le body).

Le positionnement fixed correspond au absolute, par rapport à la fenêtre du navigateur (sans influence du scroll).

La propriété float permet d'effectuer un habillage d'élément, pour faire en sorte que cet élément soit entouré par le contenu de l'élément suivant.

Elle peut prendre les valeurs left ou right

Pour ne plus subir le flottement d'un élément précédent, on peut utiliser la propriété `clear: both`

A lire :