Eu não entendi direito pra que serve o position absolute e o relative. Pode me explicar, por favor?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu não entendi direito pra que serve o position absolute e o relative. Pode me explicar, por favor?
Eles servem para posicionar elementos na tela, vou copiar a resposta que dei antes e se você ainda tiver duvidas eu tento tirar.
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; }