Entrar Ainda não tem acesso?
2
respostas

[Dúvida] USO DO RELATIVE E ABSOLUTE

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Criando o Menu Hambúrguer

por JULIANO PEREIRA DA ROSA
| 96.2k xp | 188 posts

Boa noite, tenho uma dúvida: De acordo com o que entendi sobre a explicação da Hillman, para o menu hambúrguer funcionar seria necessário que a classe cabeçalho tivesse um position relative para que pudéssemos utilizar o position absolute na classe lista-menu.

Quando utilizamos o position relative na classe cabeçalho, ela troca de estático para dinâmico(podendo mover-se para top,left,right e bottom) correto? Em sequência utilizamos o position absolute na classe lista-menu(para que ela possa usar como referência a posição da classe cabeçalho, que neste caso não foi alterada em nada, somente acrescida da position relative).

Feito isso, utilizamos um top 100% para que ela ficasse logo após 100% da classe de referência( que seria a cabeçalho)?

Se meu raciocínio acima estiver correto, como ele reagiria se mais itens possuírem uma position relative??? Ele seguirá o ultimo? Eu terei de especificar? Se sim poderia me dar um exemplo?

Desde já agradeço. Reforço que estou gostando muito do curso.

2 respostas
por Renan Lima
| 3716.9k xp | 7861 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Juliano, tudo bem?

Pelo que entendi, você está correto em relação ao uso de position relative e position absolute para o menu hambúrguer funcionar. Quando usamos position relative na classe cabeçalho, ela passa a ter um posicionamento dinâmico, permitindo que possamos utilizar o position absolute na classe lista-menu.

Ao utilizar o top 100% na classe lista-menu, ela ficará posicionada logo após 100% da classe de referência, que neste caso é a cabeçalho.

Caso haja mais itens com position relative, o posicionamento do último item será utilizado como referência para os demais itens com position absolute. Porém, é importante lembrar que cada elemento deve ter sua própria posição definida, caso contrário, pode haver conflitos de posicionamento.

Por exemplo, se você tiver um segundo elemento com position relative e quiser posicionar um terceiro elemento com position absolute em relação ao segundo, você deve definir a posição do segundo elemento para que o terceiro elemento possa usar como referência.

Espero ter ajudado e bons estudos!

por JULIANO PEREIRA DA ROSA
| 96.2k xp | 188 posts

Obrigado pela resposta Renan, então seguindo o exemplo da Hillman: Definimos um elemento position relative e logo em seguida um position absolute a 100% top. Se caso fosse inserir outro elemento em **position absolute **, como eu faria? fiquei confuso sobre essa especificação.