2
respostas

[Dúvida] Dúvida

Olá pessoal , estou com uma dúvida no curso CSS: Flexbox e layouts responsivos na aula 04
align-items: finalizando o cabeçalho

Nessa aula ele usa flexbox na class .cabecalho__container para alinhar seus itens ,

.cabecalho__container{ 
display: flex;
justify-content: space-between;
align-items: center;
position: fixed; ------- Aqui ele usa para posicionar o <section class="superior__secao__container"> .
top: 0;}

Certo até ai tudo bem mas ai ele usa o position:fixed; e o top: 0; para posicionar os itens de outra classe .superior__secao__container , como isso é possivel?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Oi, Alessandro, tudo bem?

O que acontece é que as propriedades position: fixed e top: 0, que estão na sua classe .cabecalho__container, afetam o próprio cabeçalho inteiro, e não diretamente os itens que estão dentro dele. Quando você usa fixed, esse container “sai” do fluxo normal da página e fica colado no topo da janela, por causa do top: 0. Assim, mesmo que você role a tela, ele continua lá em cima.

Agora, olhando o código, dá pra ver que a <section class="superior__secao__container"> está dentro desse cabeçalho. Ou seja, como o .cabecalhocontainer é o “pai” e a section é um “filho”, quando o pai fica fixo, todos os filhos vão junto.

É aí que entra o Flexbox. As propriedades display: flex, justify-content e align-items não mexem na posição do cabeçalho na tela, mas organizam e alinham os elementos dentro dele — logo, busca, links, tudo que estiver ali dentro.

Em resumo: o position: fixed garante que o cabeçalho fique sempre no topo da página, e o Flexbox cuida apenas da forma como os itens internos se organizam dentro desse espaço.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade

Olá Victor Costa Santos , ajudou sim , muito obrigado pelo retorno.