O div pos tem posicionamento absoluto. Como seu "pai" test tem posicionamento relativo, pos tem sua posição calculada com relação à posição de test.
Na verdade, se test tivesse posicionamento absoluto, o comportamento de pos seria o mesmo. O intuito de definir position:relative em test é fazer com que ele se torne um elemento "posicionado", ou seja, um elemento cujo posicionamento não é estático.
Repare que o parágrafo p vem depois de pos no código, mas na visualização a ordem se inverte. Isso acontece porque um elemento posicionado absolutamente é removido do fluxo normal da página e se sobrepõe a qualquer outro elemento cujo posicionamento seja estático ou relativo (a não ser que seja definido um valor para a propriedade z-index, mas isso á papo pra outra hora).
Outra coisa que devemos notar é que a largura de pos nesse caso não é mais 100% da largura de seu "pai" (comportamento padrão para elementos de bloco) e sim a largura necessária apenas para conter o texto. Ou seja, um elemento posicionado absolutamente para o qual não se define explicitamente uma largura (width) ajusta sua largura de acordo com seu conteúdo.
Esse exemplo se refere ao post Posicionamento com CSS: estático, absoluto, relativo e fixo