Meu código está ok, mas não consegui entender muito bem a diferença entre a posição relativa e a absoluta.
Meu código está ok, mas não consegui entender muito bem a diferença entre a posição relativa e a absoluta.
hoje, com a Alura e o Google Gemini
fixed: configura o elemento para ser fixado posicionado em relação pagina inteira, ou seja, independente de onde ele foi criado no html, ele vai flutuar na pagina fixado nas posições que passarmos pelo css.
Relative: como o nome sugere, define uma posição relativa do elemento em relação a algo: o elemento pai. Em outras palavras, vai ser criado um espaço pra ele na pagina e ele vai ser deslocado em relação a ele mesmo.
Absolute: configura a posição do elemento em referencia ao elemento pai. (e não cria espaço pra ele na tela)
Podemos usar fixed para fixar um botão no topo da tela, ou flutuando em determinada posição.
E usando o Relative em uma <div> para deslocar ela pra cima e pra esquerda fazendo ter um efeito de sobreposição.
e com o Absolute podemos fazer um botão flutuante no canto superior de uma <div> (por exemplo com um X e a função de fechar)
Para saber mais e ter outros exemplos de uso, recomendo a documentação da mozilla: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position