Fluxo e posicionamento

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/10-posicionamento/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Preservar o fluxo e comparar deslocamentos.
• Usar float somente com texto ao lado.

O fluxo

Sem CSS de posição, a ordem do arquivo é a ordem da tela. Quem vem primeiro no body aparece mais acima. Blocos ocupam uma faixa. Elementos em linha seguem o texto.

Isso é uma vantagem: um rascunho HTML já é um layout móvel de uma coluna. Não lute contra o fluxo no começo; use-o.

Pare e experimente. Na cópia de index.html, troque apenas a ordem de dois artigos. Preveja qual aparece primeiro, recarregue e confira. Restaure o HTML antes de usar posição.

position

static é o padrão. relative desloca a peça mas reserva o buraco original. absolute sai do fluxo e se ancora no ancestral posicionado mais próximo (ou no bloco inicial, ligado ao tamanho da viewport, se não houver). fixed ancora na janela. sticky mistura fluxo e cola.

.selo {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

O pai do selo precisa de position: relative (ou outro valor que não seja static) para servir de referência. Não construa o menu inteiro com absolute: a página quebra quando o texto cresce ou a tela estreita.

Pare e experimente. Copie .card { position: relative; left: 1rem; } na folha de teste. Mude apenas 1rem para 2rem, preveja o deslocamento e o espaço preservado, recarregue e confira. Retire a regra.

float e clear

float: left (ou right) tira a figura do fluxo normal e deixa o texto subir ao lado. clear: both impede que o próximo bloco suba também.

.noticia img {
  float: left;
  margin: 0 1rem 0.5rem 0;
}

.noticia::after {
  content: "";
  display: block;
  clear: both;
}

Float foi, por anos, o jeito de fazer colunas. Funciona mal para cabeçalho e grade: os pais “colapsam” de altura e o código enche de clearfix. Neste volume, float fica para imagem ao lado de texto. Layout de página usa Flexbox.

Pare e experimente. Localize .noticia img na folha. Mude só float: left para float: right. Preveja o lado da fotografia, recarregue e confira o texto ao redor. Restaure left.

Atividades

1. relative apaga o espaço original?
2. absolute usa sempre a janela?
3. Para que serve float aqui?
4. Qual o risco de posição fixa?

Respostas comentadas

1. Não; desloca visualmente e preserva a participação no fluxo.
2. Não; neste exercício usa o ancestral posicionado. Sem ele, o bloco inicial é a referência.
3. Para a imagem com texto ao lado, não para o layout inteiro.
4. Pode encobrir texto quando a tela ou o zoom muda; confira antes de manter.

O arquivo completo

Referência do exemplo 10-posicionamento, reproduzida aqui para que você possa conferir sem sair da página.

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}