Não entendi a função do top: 100%, como o elemento vai 100% para baixo sendo que a semantica dele esta relacionada para cima
Não entendi a função do top: 100%, como o elemento vai 100% para baixo sendo que a semantica dele esta relacionada para cima
Oi, Felipe, tudo bem?
O uso do top: 100% nesse contexto pode parecer um pouco confuso à primeira vista, mas tem uma explicação lógica.
Quando definimos position: relative no elemento pai (no caso, o header), isso estabelece um novo contexto de posicionamento para os elementos filhos. Nesse novo contexto, o top: 100% significa que o elemento será posicionado ao final do elemento pai, ou seja, a 100% da altura do elemento pai, a partir do topo do elemento pai.
Então, mesmo que o elemento filho (a lista de opções) esteja abaixo do ícone de menu hambúrguer no layout visual, ele está sendo posicionado em relação ao topo do elemento pai (o header). Isso faz com que a lista de opções fique posicionada logo abaixo do ícone de menu hambúrguer.
Sendo assim, o top: 100% não significa que o elemento vai 100% para baixo, e sim que ele será posicionado a 100% da altura do elemento pai, a partir do topo. Isso permite que a lista de opções fique alinhada corretamente em relação ao ícone de menu hambúrguer.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!