Desmistificando o CSS - Posicionando as Caixas
Tags: braziliandevs, beginners, tutorial
Published: 2022-07-14 11:57:52

Olá!

Voltamos da ultima postagem com grandes avanços em relação a nossa ideia original, de replicar a parte principal de notícias da BBC.

Caso não tenha visto, aqui está o link do último post da série.

No post de hoje, a intenção é criar novas caixas com informações, seja em forma de textos ou imagens.

# Abstração Inicial

Até então temos em nossos rabiscos, essa estrutura feita a mão.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z18srafdljx5m8i4c9jg.png)

Inclusive serviu de base na nossa última tarefa. Mas até então, isso são caixas vazias, sem nenhum conteúdo.

Como vamos adicionar textos?

Pensando rápido, caso fosse adicionar um título com uma descrição na `section__left` como faria?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkxdij8386e3dk0x587j.png)

Só adicionar desta maneira, nós teríamos esta estrutura, que se segue abaixo,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcrjhz3plq5tblvrn0qa.png)

Não é bem isso que queremos, correto?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuiajhf0nsf05hzzwyau.png)

Se compararmos com o a página da BBC, vemos que as caixas de texto estão na metade da caixa, com um espaçamento entre elas.

O que fazer?

Se você já tiver alguma experiência, rapidamente já pode estar pintando algo sobre usar `position` , sendo elas, nestas situação: `absolute` e `relative`.

E aí, de novo, vamos ter de trabalhar com o relacionamento de caixas-pai e caixas-filho.

Só que neste momento, a caixa `section__left` tem dois filhos. Não seria melhor trabalhar a posição com apenas uma caixa, e deixar pra ajeitar os detalhes de estilização, pra depois?

O que eu quero dizer é,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvfxkoqok76udmxjw941.png)

Criar uma caixa, sem valor semântico nenhum (por isso estou utilizando uma div), apenas para poder manipular o seu relacionamento com a caixa-pai, que aqui será a position. E desta forma, poderei trabalhar com os textos apenas para estilização deles, e não o seu posicionamento.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qfbtkqqnb27a1i3kzn9.png)

# Mãos no código

Vamos começar criando a nossa estrutura de código dentro do HTML. Até agora estamos utilizando o mesmo layout criado no post passado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i7k9aob4vx20vqs8t00.png)

Como a caixa terá metade da altura da section__left podemos definir sua altura diretamente, e explicitaremos o width: 100% para ocupar toda a largura disponível dentro da caixa-pai.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuagraq3gakm8608y6nr.png)

E assim, teremos este resultado

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kh017fxisbl9qs69u24.png)

Bem mais fácil, não?

Assim não precisamos ficar ajustando a distância de cada caixa de texto. Podemos colocar todos dentro de uma caixa, e utilizar de propriedades do CSS para manipular o relacionamento entre caixa-pai e caixas-filho.

Com base nisto, e entendendo que as `tags` também são caixas, sejam caixas de textos, também como `imgs`. Vamos usar desta mesma ideia de relacionamento para colocar uma imagem de fundo.

## Adicionando Imagens

Vou utilizar do [placeholder.com](http://placeholder.com) para buscar um placeholder (redundante, não?) para colocar aqui.

Ao adicionarmos no HTML

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujxreief3xfpvv8c92ix.png)

Para o nosso espanto, acontece isso!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgb088moolz8xe4mdd51.png)

Agora desandou! Deu tudo errado! 🤬

Calma lá, temos que olhar o relacionamento das caixas-pai com a caixa-filho, aqui a caixa-pai é `main-section__left` e a caixa-filho é a `img` .

Temos que avisar a caixa-filho para ocupar tanto a `altura` quanto a `largura` da sua caixa hierárquica mais alta.

Assim, adicionamos só essas linhas de código no nosso CSS.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzcmwmwjmxrk1vcijhnd.png)

E pronto, problema resolvido!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdyqp4841jmwvcxo8w6z.png)

Agora a imagem está contida dentro da sua caixa-pai.

Está bem próximo da ideia de como funciona a parte de informações principais do site da BBC, correto?

E se retirarmos as bordas usadas como guias, fica assim,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr33zszklswutpfam0fn.png)

Tá ficando legal!

# Por hoje, é só.

Hoje vimos no post mais um relacionamento entre caixas-pai e caixas-filho. Caso queira praticar, adicione imagens e textos nas caixas dos artigos. 

Se quiser buscar a perfeição, refaça tudo que fizemos até agora e adicione exatamente as notícias do dia da BBC no seu projeto.

Num próximo post, podemos começar a falar sobre o CSS3 e os modelos como Flexbox e CSS Grid.

Esses modelos são baseados principalmente nesse relacionamento entre caixas.

O link do codepen do que fizemos até agora, se encontra [aqui](https://codepen.io/mpfdev/pen/jOzqKaZ).

# Para ler mais:

Não entrei afundo sobre position, pois estou partindo do principio que já existe um entendimento. De qualquer maneira o material do MDN é muito bom, mas caso tenha dúvidas, posso escrever sobre.

- [Position](https://developer.mozilla.org/pt-BR/docs/Web/CSS/position)

Utilizando muitos dos princípios mostrados até aqui, eu já escrevi um post montando um lookbook usando CSS Floats. Caso queira entender melhor o relacionamento das caixas, verifique o artigo! 
Embora esteja em inglês, tem bastante figura auto-explicativa!

- [Lookbook with CSS Floats](https://dev.to/mpfdev/lookbook-with-css-floats-673)