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 ;
}