En el curso de Front End Developer, logramos ver el tema de las posiciones y una explicación; sin embargo, a mi parecer hay posiciones que pueden ser explicadas más a fondo, para entender mejor que hace cada una al ponerla en un elemento HTML; es por eso que aquí vamos a ver una explicación más detallada de las posiciones estática, relativa y absoluta y el cómo afectan a los objetos.
Posición Estática
es la posición por defecto que tienen los objetos en la manera que se posicionen en el HTML, es decir en el flujo normal del documento, Las propiedades top, right, bottom, left, and z-index no tienen efecto.
Posición relativa
Posición relativa, pero ¿relativa a qué?, relativa a su posición inicial o estática, eso quiere decir que su posición puede ser modificada, pero del mismo modo, su posición estática sigue siendo ocupada, es así que este posicionamiento no afecta al flujo del documento, y podemos observar como el espacio que debe ocupar sigue estando libre, pero la figura no está en ese espacio, sufrió una transformación en _ relación _ con ese espacio.
Siendo más específicos “El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a sí mismo, con base en los valores de top, right, bottom, and left. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera static. Este valor crea un nuevo contexto de apilamiento.”
Posición Absoluto
Con esta posición el elemento es removido del flujo del documento, eso quiere decir, que a diferencia de la anterior, su posición estática no es guardada y no se guarda el espacio que debe ocupar en el flujo del documento, posicionando los otros elementos como si este no existiera, su posición y posteriores transformaciones se hacen en relación con su contenedor padre o en caso de no existir, basándose en el contenedor inicial. Su posición final está determinada por los valores de top, right, bottom, y left.
**BIBLIOGRAFÍA: ** https://developer.mozilla.org/es/docs/Web/CSS/position
Muy buena explicación 😉