La clave es esta: position: absolute posiciona un elemento respecto a su ancestro posicionado más cercano (un padre que tenga position: relative, absolute, fixed o sticky). Si no encuentra ninguno, se posiciona respecto al <body>.
position: relative posiciona un elemento respecto a su posición original. Y, lo más importante, crea un "contexto de posicionamiento" para sus hijos con position: absolute. El patrón más común es tener un contenedor con relative y un hijo dentro con absolute.
