Display, fluxo e posição: o topo que gruda · CSS do zero

O fluxo normal

Sem nenhum CSS, o navegador empilha os elementos de cima para baixo, na ordem do HTML. Isso é o fluxo normal, e ele já funciona: numa tela estreita, o texto quebra sozinho; numa larga, se estica.

Quase todo problema de layout começa quando alguém luta contra o fluxo em vez de usá-lo. O seu portfólio, empilhado de cima para baixo, já está quase certo: o que falta é alinhar algumas coisas lado a lado, e isso são as duas próximas aulas.

Bloco e linha

div,
p,
h1,
section {
  display: block;
} /* padrão */
span,
a,
strong,
em {
  display: inline;
} /* padrão */

	`block`	`inline`
ocupa a linha inteira	sim	não
aceita `width`/`height`	sim	não
aceita margem vertical	sim	não

/* O meio-termo: fica ao lado, mas aceita medidas */
.acao {
  display: inline-block;
  padding: 12px 24px;
}

É exatamente o que transforma o link "Vamos conversar" da sua abertura num botão: ele continua sendo um <a> - porque leva a outro lugar -, e passa a aceitar recheio e altura.

Esconder

.oculto {
  display: none; /* some do layout E do leitor de tela */
}

.invisivel {
  visibility: hidden; /* invisível, mas o espaço continua reservado */
}

/* Invisível na tela, mas lido pelo leitor de tela */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

A terceira é a que serve para o link "pular para o conteúdo" e para rótulos que o desenho não mostra mas que o leitor de tela precisa anunciar.

O link de pular, que aparece só no Tab

O curso de HTML pediu o link "pular para o conteúdo" como primeiro elemento do <body>. Na tela, ele não precisa aparecer - até alguém chegar nele pelo teclado:

.pular {
  position: absolute;
  top: var(--espaco-2);
  left: var(--espaco-2);
  z-index: 20;
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--realce);
  color: var(--realce-tinta);
  border-radius: var(--raio);
  transform: translateY(-200%);
}

.pular:focus-visible {
  transform: translateY(0);
}

Ele fica deslocado para fora da tela e volta ao receber foco. Repare que não é display: none: se fosse, ninguém conseguiria alcançá-lo com o Tab, e o link não serviria para nada.

Posicionamento

.normal {
  position: static; /* padrão: segue o fluxo */
}

.ajustado {
  position: relative; /* desloca a partir de onde estaria */
  top: 4px;
}

.sobreposto {
  position: absolute; /* sai do fluxo */
  top: 8px;
  right: 8px;
}

.fixo {
  position: fixed; /* preso à janela, mesmo rolando */
  bottom: 16px;
  right: 16px;
}

.grudento {
  position: sticky; /* normal até o limite, depois gruda */
  top: 0;
}

O par relative + absolute

O caso mais comum do portfólio: o selo "NO AR" no canto do cartão de projeto.

.cartao {
  position: relative; /* vira a referência */
}

.cartao .situacao {
  position: absolute;
  top: var(--espaco-3);
  right: var(--espaco-3);
}

Sem o relative no pai, o absolute se posiciona em relação à página inteira - e o selo vai parar no canto do documento, não do cartão.

A barra de topo, que acompanha a rolagem

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

Num portfólio de página inicial longa, é o que impede a pessoa de rolar até o topo para trocar de página. Quatro linhas, e duas delas são armadilha:

sticky precisa de top (ou bottom) para saber onde grudar, e o fundo precisa ser opaco, senão o conteúdo passa por trás e o menu vira uma mancha ilegível no meio do texto.

`z-index`

Quando dois elementos se sobrepõem, o maior z-index fica por cima:

header {
  z-index: 10;
}

.pular {
  z-index: 20; /* acima do cabeçalho, senão fica escondido atrás dele */
}

Só funciona em elemento posicionado. E não precisa de números grandes: um portfólio inteiro se resolve com dois ou três níveis. Se você chegou a z-index: 9999, a estrutura provavelmente está pedindo revisão.

No portfólio

Hoje entram as poucas coisas que saem do fluxo:

header com position: sticky, top: 0, fundo opaco e borda inferior;
scroll-margin-top nos <h2> com id da página inicial;
a classe .pular, deslocada para fora e trazida de volta no foco;
a classe .apenas-leitor, usada no nome dos links só com ícone do rodapé;
o selo de situação no canto do cartão, com o par relative + absolute;
display: inline-block nos links de ação da abertura.

Depois role a página inicial inteira. A barra deve acompanhar sem piscar, e o conteúdo não pode aparecer por trás dela. Em seguida percorra com Tab: o primeiro Tab tem de fazer o link de pular aparecer.

Exercícios

Faça a barra de topo grudar com sticky, e confira que nada passa por trás.
Escreva a classe .pular e teste com o primeiro Tab da página.
Escreva a classe .apenas-leitor e use-a no nome de um link só com ícone. Depois ouça com o leitor de tela.
Ponha o selo "no ar" no canto de um cartão com relative + absolute. Depois tire o relative do pai e veja para onde ele vai.
Transforme o link "Vamos conversar" em botão com inline-block e padding.
Clique numa âncora do sumário da página inicial. O título ficou escondido atrás da barra? Conserte com scroll-margin-top.

Referências

Fluxo normal - MDN - como o navegador organiza sem ajuda
Posicionamento - MDN - os cinco valores, com exemplos
CSS Layout - W3Schools - referência rápida