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

Poisition vs display

Oi gente, bom dia!

Gostaria de saber pq, para centralizar o menu nav, foi preciso modificar a posição (de static para absolute e relative no caso da "caixa" div) e para centralizar os produtos (.produtos) foi utilizado apenas o display e não precisou modificar tb a posição do conteúdo?

Tenho dificuldade de saber quando seria melhor utilizar um e quando seria melhor utilizar o outro.

header {
    background-color: #bbb;
    padding: 20px 0;
}

.caixa {
    width: 85%;
    position: relative;
    margin: 0 auto;
}

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

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.produtos {
    width: 85%;
    margin: 0 auto;
}

.produtos li {
    display: inline-block;
}

Obrigada!

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
1 resposta
solução!

Oi Anne,

Explicando o position: absolute; :

Quando se coloca position: absolute;, esse elemento vai utilizar como referência de top e left as extremidades do navegador. Porém se você colocar um position: relative; no container, no caso o .caixa, o elemento vai utilizar as extremidades do container como referência.

Por que ele utilizou position: absolute; ?

Como o menu precisava ficar ao lado da logo e centralizada verticalmente, essa foi uma das soluções utilizadas.

Por que nos produtos só com display: inline-block; resolveu ?

Como os produtos ocupam toda a tela e não precisavam centralizar verticalmente, essa solução já foi suficiente.


Eu acho que não precisa se preocupar muito em fazer da melhor maneira por enquanto (no começo é assim mesmo), nos outros cursos mais avançados você vai aprender outras propriedades e as coisas vão clarear aos poucos.

Spoiler: quando você aprender display: flex; vai mudar a sua vida, rsrs