Uma pergunta um pouco fora do contexto de design responsivo, mas que me veio durante a aula.
Criamos o pseudoelmento .menu-ativo::after e adicionamos um position: fixed para que pudessemos posiciona-lo a pagina de forma que cubra toda pagina para dar o efeito de fundo ao menu responsivo.
Quando adicionamos um position a um elemento, o elemento passa a ter como referencia o elemento pai que tambem tiver um position adicionado para o uso das propriedades de posicionamento (top, left, right, bottom). Caso nao haja nenhum elemento pai que tenha um positon, o elemento tem como referencia a tag html sendo posiconado automaticamente na parte superior esquerda da tag, ou seja, no inicio do documeto HTML.
Nesta aula em questao, adicionamos um position: fixeda um pseudoelemento da classe .menu-ativo e esta classe foi adicionada a tag html. Numa solucao alternativa, adicionando width: 100%, height: 100% e top: 0. Meu CSS ficou da seguinte maneira:
.menu-ativo::after {
content: "";
background: rgba(0,0,0,0.4);
position: fixed;
top: 0;
height: 100%;
width: 100%;
}Eu notei que o pseudoelemento ficou na parte superior fora da pagina e so tornou a vir para pagina ao adicionarmos o top: 0. Entao, qual seria a referencia do pseudoelemento?
