Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Por que não utilizar a tag display ao invés de position?

Foi inserido neste trecho de código do curso um position para a seção nav. Por que não utilizar a tag display: inline para que houvesse o recuo do nav, para que ficasse ao lado da imagem?

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>    
1 resposta
solução!

Boa noite Mikael, tudo bem? Sobre sua duvida. A imagem da logo, por padrão precisa estar como display: block para que sofra alterações de widthe height. Como block, ela não permite que elementos se posicionem aos lados, logo, não adiantaria colocar o display: inline para o nav.

Uma outra solução, além do position, seria usar o display: flex no elemento pai, ou seja, na classe .caixa e aplicar os atributos align-items: center para alinhar os elementos filhos na mesma altura e justify-content: space-between para acrescentar um espaço entre os elementos, fique à vontade para testar, mas lembre-se de comentar o position do elemento nav.

Agora, lembrando. A solução usada no vídeo foi o position pois faz parte da didática do curso. Se quiser algum curso mais avançado sobre posicionamentos, a Alura oferece o curso de Flexbox que explica certinho como usar esse atributo.

https://cursos.alura.com.br/course/posicione-elementos-com-flexbox

Espero ter ajudado. Abraços!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software