Quais são os valores CSS position?

Question

Accepted Answer

`position` controla como um elemento é posicionado e se as propriedades de deslocamento (`top`/`right`/`bottom`/`left`) se aplicam.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: o emparelhamento-chave

`absolute` posiciona um elemento em relação ao seu **ancestral posicionado mais próximo** (qualquer coisa que não seja `static`). Você define `position: relative` em um pai para torná-lo o ponto de referência:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

Este padrão relative-pai / absolute-filho está em todos os lugares: emblemas, dropdowns, tooltips, botões de fechar.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — bloqueado na viewport (sempre visível), por exemplo, uma barra de navegação persistente.
- **sticky** — atua como relative até atingir o limite (`top: 0`), depois fica lá enquanto seu contêiner estiver à vista — ótimo para cabeçalhos de seção.

## Uma armadilha comum

Elementos `absolute`/`fixed` são **removidos do fluxo normal**, portanto não reservam espaço — elementos irmãos agem como se não estivessem lá, o que pode causar sobreposição. Planeje para isso (por exemplo, adicione padding para compensar uma navbar fixa).

## Por que isso importa

`position` é essencial para sobreposições, cabeçalhos sticky, modais, dropdowns e emblemas.

A relação relative-pai/absolute-filho e a distinção fixed-versus-sticky são o núcleo prático que você usa constantemente.