Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Position com absolute e relative

No último vídeo apresentado, o instrutor coloca o menu de navegação em 'absolute' para dar um novo ponto inicial ao elemento HTML e depois cria um 'div class="caixa"' que envolve esse menu. Porém esse menu continua para fora dos limites do 'div'. Para resolver isso, ele adiciona 'position: relative' para a classe 'caixa' e tudo fica perfeito. Durante a explicação do 'relative' ele explica que esse valor dentro da propriedade 'position' refere-se ao posicionamento deste elemento em relação ao seu ponto de origem. No caso da classe 'caixa' foi apenas inserido 'position: relative'. Minha dúvida é: sempre que tenho um elemento filho reposicionado com 'abolute' envolvido por outro elemento pai é necessário inserir 'relative'? Por que isso é necessário?

3 respostas
solução!

Se você não colocar o relative no pai, o seu elemento absolute vai ser absoluto em relação a qualquer ponto da página, ou seja, ele ignora o pai. Então, mesmo que seu elemento absolute esteja dentro de uma div, se você não colocar está div como relative, o elemento absolute vai ignorar está div. Resumindo: o elemento absolute vai ser absoluto em relação a pág toda, a não ser que eu declare um pai para ele, através do position: relative.

Obrigado Matheus Martins Pazinati, ficou mais claro.

Oi gente!

eu entendi perfeitamente a explicação acima, mas ainda assim queria entender por que a classificação de posicionamento "relative" tem esse poder sobre "absolute" (se é que eu posso usar esse termo) - usando o exemplo do curso: se a caixa que eu criei, está em div que está numa posição superior a nav, isso por si só já não seria razão suficiente para mover todo menu nav para dentro da minha caixa?

<header>
           <div class="caixa">
             <h1><img src="logo.png"></h1>
                <nav>  
                    <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contatos.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>
         </header>
.caixa {
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0px;
}