Las propiedades de diseño más utilizadas en CSS son Float (explicación detallada de la propiedad flotante de CSS Float) y la otra es la propiedad de posicionamiento de CSS Position.
1.posición: estática
El posicionamiento predeterminado de todos los elementos es: posición: estática, lo que significa que el elemento no está posicionado y aparece donde debería estar en el documento.
En términos generales, no es necesario especificar la posición: estática a menos que desee anular el posicionamiento establecido previamente.
#div-1 {
posición: estática;
}
2. posición: relativa
Si configura la posición: relativa, puede usar arriba, abajo, izquierda y derecha para mover el elemento en relación con donde debería aparecer en el documento. [Esto significa que el elemento todavía ocupa su posición original en el documento, pero se mueve visualmente con respecto a su posición original en el documento]
#div-1 {
posición: relativa;
arriba: 20px;
izquierda: -40px;
}
3. posición:absoluta
Cuando se especifica posición: absoluta, el elemento está fuera del documento (es decir, ya no ocupa una posición en el documento) y se puede posicionar con precisión de acuerdo con la configuración superior, inferior, izquierda y derecha.
#div-1a {
posición:absoluta;
arriba: 0;
derecha: 0;
ancho: 200 px;
}