A propriedade position

O que o position faz?

É aqui que você assume o controle. position tira (ou não) um elemento do fluxo normal e habilita os deslocamentos top, right, bottom e left para movê-lo onde você quiser. Há cinco valores, e cada um joga com suas próprias regras.

static (padrão)

position: static é o comportamento normal: o elemento segue o fluxo e os deslocamentos não têm efeito.

relative

position: relative mantém o elemento no seu lugar no fluxo (continua ocupando seu espaço original), mas agora top/left/etc. o movem em relação a essa posição de partida. Seu outro grande uso, talvez o mais importante: transformá-lo em ancestral de referência para os filhos absolute. Guarde isso, porque volta já já.

.movido {
  position: relative;
  top: 10px;   /* desce 10px de onde estava */
  left: 20px;  /* desloca-se 20px para a direita */
}

absolute

position: absolute tira o elemento do fluxo (deixa de reservar espaço) e o coloca em relação ao ancestral posicionado mais próximo: o primeiro, subindo na árvore, que tenha um position diferente de static. Se não houver nenhum, ele é posicionado em relação ao documento.

⚠️ PEGADINHA CLÁSSICA: em relação a quem um absolute se posiciona? Não em relação ao pai direto, mas ao ancestral posicionado. Se o seu emblema vai parar no canto da página em vez do canto do seu cartão, é quase certo que faltou um position: relative nesse cartão.

.contenedor { position: relative; }   /* ancestral de referência */
.badge {
  position: absolute;
  top: 8px;
  right: 8px;   /* canto superior direito do contenedor */
}

Esse padrão relative + absolute é o feijão com arroz para colocar emblemas, ícones ou botões de fechar exatamente onde você quer dentro de uma caixa.

fixed

position: fixed também sai do fluxo, mas se ancora à janela do navegador (viewport): não se move ao rolar a página. É o truque por trás daquela barra que fica fixa no topo, ou daquele botão flutuante que te acompanha pela página inteira.

.botao-flutuante {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

sticky

position: sticky é o camaleão: o elemento flui normalmente até alcançar o limiar que você marca (p. ex. top: 0) durante a rolagem; nesse ponto ele "gruda" e permanece fixo enquanto seu contenedor continuar na tela. Perfeito para aqueles cabeçalhos de seção que ficam no topo enquanto você lê a seção e depois vão embora junto com ela.

.cabecalho {
  position: sticky;
  top: 0;   /* gruda na borda superior ao rolar */
}

Resumo: relative move e referencia; absolute posiciona dentro do ancestral; fixed se ancora ao viewport; sticky gruda ao rolar.

Exemplos

Um emblema no canto com relative + absolute

<style>
.caixa {
  position: relative;
  width: 160px;
  height: 90px;
  background: #e2e8f0;
}
.badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ef4444;
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}
</style>
<div class="caixa">
  <span class="badge">Novo</span>
  Produto
</div>