Posicionar somente quando necessário

Neste capítulo você vai posicionar um detalhe sem retirar o conteúdo principal do fluxo. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 02. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 03-posicionamento do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

A caixa de referência vem primeiro

Position relative mantém a caixa no fluxo e oferece uma referência para descendentes posicionados. O selo Projeto fictício usa position absolute dentro do painel hero. Absolute retira o selo do fluxo normal: ele não reserva espaço automaticamente para o parágrafo. A referência deixa padding superior para que o selo não cubra a leitura. Isso serve para um detalhe curto, não para posicionar toda a agenda. Antes de usar coordenadas, identifique em relação a qual caixa elas serão calculadas.

Faça na sua cópia

Confira .hero e .selo na folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

.hero { position: relative; padding: 3.5rem 1rem 1rem; }
.selo { position: absolute; top: .6rem; right: .6rem; }

Mude uma coisa e preveja

Troque somente right: .6rem por right: 1.2rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O selo se afasta da borda direita do painel. Os cartões continuam abaixo do painel no fluxo.

Se não acontecer

Confira se relative está no painel e se o selo continua dentro dele no HTML.

Um detalhe pode esconder uma informação

O navegador pode desenhar um elemento posicionado sobre outro conteúdo. Uma tela larga talvez esconda esse problema porque há sobra de espaço. Quando a largura diminui ou o texto cresce, o selo pode disputar o lugar do título. Por isso a experiência usa mudança pequena e comparação em mais de uma condição. Z-index muda a ordem de sobreposição, mas não cria espaço para ler o texto que ficou coberto. A correção precisa resolver a posição ou devolver o elemento ao fluxo.

Faça na sua cópia

Observe o painel em tela estreita. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

.selo { top: .6rem; right: .6rem; }

Mude uma coisa e preveja

Troque somente o texto do selo por Projeto fictício para estudo de layout.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O selo precisa continuar legível sem cobrir o título. Se disputar espaço, a experiência mostrou o limite desse arranjo; restaure o texto curto.

Se não acontecer

Não aumente z-index para esconder o título atrás do selo. Use um elemento no fluxo quando o detalhe não couber.

Reconhecer legado sem reconstruir o site

Float foi usado em layouts antigos de várias colunas. Seu papel mais simples hoje é permitir que texto envolva uma imagem. Flexbox e Grid oferecem mecanismos próprios para organizar o projeto. Position fixed prende um elemento à janela e pode cobrir conteúdo; não é requisito para uma navegação útil. A decisão começa na necessidade: cartões precisam se distribuir; um selo precisa ficar num canto. Usar a mesma ferramenta para todas as tarefas cria problemas que o aluno depois precisa remendar.

Faça na sua cópia

Veja a agenda sem regras de posicionamento absoluto nos cartões. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

.card { margin-block: 1rem; }

Mude uma coisa e preveja

Numa cópia, acrescente somente position: relative ao cartão e recarregue, sem top ou left.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O cartão conserva seu lugar. Relative sozinho não transforma a agenda em colunas nem prende a caixa à janela.

Se não acontecer

Se o cartão saiu do lugar, confira se também ficou top, left, absolute ou fixed de uma experiência anterior.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Descreva a caixa que orienta o selo.

2. Teste um selo maior e explique por que z-index não resolve falta de espaço.

3. Explique por que a agenda permanece no fluxo.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. O painel hero usa relative e é o ancestral de referência do selo absoluto. As distâncias do selo partem dele.

2. Z-index altera qual camada aparece por cima, sem reservar espaço. Se há disputa, reorganize ou devolva o texto ao fluxo.

3. Os cartões precisam crescer com texto e zoom. Mantê-los no fluxo evita calcular alturas e coordenadas para cada conteúdo.

Quando seguir

Você usa posicionamento para um detalhe e reconhece uma sobreposição que precisa ser corrigida. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p class="selo">Projeto fictício</p><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>