Les propriétés de mise en page les plus couramment utilisées en CSS sont Float (explication détaillée de la propriété flottante CSS Float) et l'autre est la propriété de positionnement CSS Position.
1.position: statique
Le positionnement par défaut de tous les éléments est : position:static, ce qui signifie que l'élément n'est pas positionné et apparaît là où il devrait être dans le document.
De manière générale, vous n'avez pas besoin de spécifier position:static sauf si vous souhaitez remplacer le positionnement précédemment défini.
#div-1 {
position : statique ;
}
2. position : relative
Si vous définissez position:relative, vous pouvez utiliser haut, bas, gauche et droite pour déplacer l'élément par rapport à l'endroit où il doit apparaître dans le document. [Cela signifie que l'élément occupe toujours sa position d'origine dans le document, mais est visuellement déplacé par rapport à sa position d'origine dans le document]
#div-1 {
position : relative ;
haut : 20 px ;
gauche : -40px ;
}
3. position : absolue
Lorsque position:absolute est spécifié, l'élément est hors du document (c'est-à-dire qu'il n'occupe plus de position dans le document) et peut être positionné avec précision en fonction des valeurs définies en haut, en bas, à gauche et à droite.
#div-1a {
position : absolue ;
haut : 0 ;
à droite : 0 ;
largeur : 200 px ;
}