Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

postion: fixed no pseudoelemento da classe .menu-ativo

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?

5 respostas
solução

Fala aí Tiago, tudo bem? nesse exemplo e referência para o pseudoelemento será página, isso porque o fixed ignore a definição dos pais.

Ele vai se posicionar ela relação a página (janela do browser).

Caso você precise que ele se posicione em relação ao pai vai precisar adicionar um absolute ao invés fixed.

Espero ter ajudado.

No caso, o postion: fixed sempre tem como referência a página, ao contrário do position: absolute que tem como referência o pai?

No caso, o postion: fixed sempre tem como referência a página

Sim

ao contrário do position: absolute que tem como referência o pai?

Não, o absolute vai ter como referência o primeiro pai que tenha um position do qual não seja static. (isso não necessariamente vai ser o pai).

Pode ser o avó, bisavo, taravo, etc...

Espero ter ajudado.

Obrigado, Matheus!

Magina Tiago, sempre que precisar não deixe de criar suas duvidas.

Abraços e bons estudos.