As the name says it is relative (in relation to something)
Imagine that a website’s folders have the following structure:
/ (aqui a raiz do projeto)
css/
estilos.css
imagens/
logo.png
icones/
usuario.jpg
In your "styles.css" file you want to create a style where the background is image, the "logo.png" for example. Something like this:
.estiloFundo { background-image: (logo.png) }
This would not work at first, because in the folder where the file is "styles.css", there is no file "logo.png".
Using the absolute path, you would need to know the dns from where it is stored, suppose "http://meusite.com/aplicacao/imagens/logo.png".
But if changing dns or something else in the name will invalidate your css, so we can use a relative path.
That is, "in relation to the "css" folder, the image is a level above, then in the images folder", that is, the relative path would be ".. /images/logo.png", or "in relation to the css folder, the images folder is in the root of the structure", then the relative path would be "/images/logo.png", so that would be the relative paths (to the folder where the.css styles are located):
.estiloFundo { background-image: (../imagems/logo.png) }
.estiloFundo { background-image: (/imagems/logo.png) }
I used an example image, but it can be any resource, html file links (pages) for example, something like:
<a href="../contato/faleconosco.html">
The main advantage is not having to know the absolute path, that is, the entire link of the resource to be accessed.
Against? I cannot think of any, comparing it to the other possibility, which is to use the absolute path. This of course, using within your site if it is a link to another site has to be the absolute path obviously.