[Duda] Diferencia entre posicion absoluta y relativa

Hola, la propiedad posicion sirve para posicionar un elemento dentro de la página, con position relative podemos posicionar un elemento respecto al flujo normal de la página, a diferencia de position absolute que toma como referencia la ventana del navegador por ejemplo.

talvez te sirva verlo de asi, en el momento que creas un elemento HTML éste ya tiene una posición inicial (top, right,botton,left) cuyos valores no conocemos.

cuando vamos al CSS y cambiamos la position: absolute.... estamos cambiando esa posicion inicial tomando como referencia el top, right, botton y left de la pagina completa.

cuando usamos la posición relativa el elemento se mueve respecto a su pocicion inicial original, el (top, right,botton,left) cuyo valor no conocemos,

e.g. imagina que defines 7 elementos HTML y el septimo tiene una posicion inicial a mitad de la pagina sobre le costado izquierdo, si cambiamos al posicion absoluta dando top:0px, y right:0px ese elemento se desplazara a la esquina superior derecha de la pantalla, cambio su posicion inicial.

Pero con la position relative el elemento toma como referencia su posicion actual. y los 0px de top y right no serían la nueva posicion a donde le indicamos ir, serían la distancia que queremos que se desplace desde su posicion inicial, como un plano cartesiano ese (top, right,botton,left) que desconocemos se convierte en el punto (0,0) y lo que sedefine es el desplazamiento que queremos dar desde ese punto