Explicação Posicionamentos no CSS

Não sou muito bom explicando mas posso tentar.

O static é o que já vem por padrão, nele você não consegue usar propriedades como top e left.

O relative é a posição relativa a ele mesmo, ou seja, se o elemento tiver no meio da tela e você usar position: relative e top: 10px; ele nâo vai descer 10px a partir do topo da tela e sim 10px a partir da posição que ele estava (nesse caso desceria 10px a partir do meio da tela).

E o asbolute é a posição a partir do elemento pai relativo (caso não tenha ele será relativo ao body), ou seja, se você criar um quadrado com 200px de altura e 200px de largura e usar position relative nele e dentro criar um circulo com position absolute e usar top: 10px e left: 10px ele movera dentro do quadrado e caso não use relative no quadrado ele movera dentro do body inteiro.

codigo do exemplo:

HTML:

div class="quadrado"> div class="bola">

CSS:

*{ margin: 0; padding: 0; box-sizing: border-box; }

body { height: 100vh; }

.quadrado { position: relative; top: 10px; height: 200px; width: 200px; background-color: blue; margin: 30vh auto; }

.bola { border-radius: 50%; position: absolute; bottom: 0; left: 50px; height: 100px; width: 100px; background-color: yellowgreen; }