https://la-cascade.io/le-positionnement-css/
https://la-cascade.io/la-difference-entre-block-et-inline/
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
Par défaut position prend la valeur static (l'élément est positionné dans le flux)
.exemple {
position: static;
}Avec position: relative l'élément est toujours dans le flux mais il est décalé par rapport à sa position normale sans que cela modifie la position des éléments précédents et suivants
Avec position: absolute l'élément n'est plus dans le flux. Il est positionné par rapport au viewport (la fenetre) et par rapport à l'élément parent si ce parent est lui-même relative.
Avec position: fixed l'élément n'est plus dans le flux. Il est toujours positionné au même endroit (le contexte de positionnement est toujours le viewport) dans la page et ne change pas de position mais quand on scrolle. Utile pour une bannière fixe !
- aucune largeur définie => largeur de l'élément parent
- aucune hauteur définie => hauteur des éléments enfants
- peut avoir des marges et des paddings
=> inutile de définir la largeur d'1 élément block (pas de width: 100%)
Exemple d'éléments block : p, div, form, header, nav, ul, li, h1
- s'inscrit dans le flux du texte
- ne saute pas à la ligne comme 1 élément block
- ignore marge haut + bas, accepte marge latérale et padding
- ignore prop width et height
- s'il est floaté, devient un élement block
- accepte propriété white-space et vertical-align
Exemple d'éléments block : a, span, em, cite, mark, code
Les éléments block sont structurels, les éléments inline sont relatifs au texte.
On peut inclure un élt block dans un block, un élt inline dans un inline, un élt inline dans un block.
On ne peut pas inclure un élt block dans un inline (sauf a qui peut envelopper les 2).
On peut changer un élt block en inline et viceversa via la propriété CSS display
Elts dont l'apparence et les dimensions sont définies par une ressource extérieure (exemples : image, élt d'1 formulaire). On pourrait les considérer comme proches d'inline mais avec une structure de block.
Exemple d'éléments remplacé : img, object, input, select
Définition de la valeur inline-block pour la propriété display : "un inline-block est placé inline (sur la même ligne que le contenur adjacent), mais il se comporte comme un block",
Comment l'utiliser ?
- pour metttre 1 élt inline en préservant les capacités block tels que largeur, hauteur, marges top bottom
- pour placer plusieurs élts de type block sur la même ligne horizontale sans les floater