Positionnement en CSS
1. Display et flux
Par défaut, les éléments se positionnent dans l'ordre où ils sont déclarés dans le fichier HTML : dans le flux.
Block
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.
In-line
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…
Propriété display
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).
2. Position
2.1 static
La position d'un élément dans le flux est par défaut static.
2.2 relative
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;
2.3 absolute
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).
2.4 fixed
Le positionnement fixed correspond au absolute, par rapport à la fenêtre du navigateur (sans influence du scroll).
3. float
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`
jcheron