Entonces que es “position: relative”?

para entender position: relative y position: absolute tener en cuenta los siguientes conceptos

1- flujo de renderizado: es el orden en que se dibujan los elementos en pantalla. por defecto todos los elementos se dibujan de izquierda a derecha y de arriba a abajo, osea, el punto 0,0 de los elementos es la esquina superior izquierda de la pantalla

2- espacio reservado: es el espacio que el navegador asigna a cada elemento

position relative: permite posicionar elementos en pantalla mantiendo el flujo de renderizado y el espacio reservado por el navegador para cada elemento por lo que estos se ubican uno encima de otro si son elementos en bloque o uno al lado del otro si son elementos en linea

Es un elemento que sigue el flujo del documento y puedes modificar su posicion con top, right, bottom y left. La diferencia con absolute es que absolute sale del flujo del documento.

https://developer.mozilla.org/es/docs/Web/CSS/position