Encontrei uma dificultada de enquanto codava o Desafio do Decodificador de texto e ainda to com essa dúvida hehe eu esta fazendo o processo pelo monitor de 24' polegada e quando fui joga a pagina para a tela do notebook ela mudou a posição dos elementos então fiquei meio perdido com posicio: absolute ou relativo dentre outra hehe acabei envido com alguns erros devido ter perdido muito tempo com isso.
hoje, com a Alura e o Google Gemini
Olá, Gilberto!
Tudo bem?
O que está acontecendo é que a página está sendo exibida de maneira diferente em diferentes tamanhos de tela.
No CSS, as propriedades position: absolute e position: relative têm comportamentos diferentes. O position: absolute posiciona um elemento em relação ao primeiro elemento pai posicionado (não estático). Se não houver nenhum, ele se posiciona em relação à página inteira. Já o position: relative posiciona um elemento em relação à sua posição normal.
No seu caso, parece que você poderia se beneficiar do uso de unidades relativas (como porcentagens, em vez de pixels) e/ou do uso de media queries. As media queries permitem que você aplique estilos diferentes para diferentes dispositivos ou tamanhos de tela.
Por exemplo, você pode usar uma media query para aplicar estilos diferentes para telas menores que 600px:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Neste exemplo, o fundo do corpo da página se tornará azul claro quando a largura da tela for menor que 600px.
Lembre-se, o design responsivo pode ser um pouco complicado no início, mas com a prática, ele se tornará mais fácil.
Espero ter ajudado.
Qualquer coisa compartilha os códigos dos seus arquivos HTML e CSS completos aqui com a gente.
Bons estudos.