position: static — o padrão que você sempre teve

Uma propriedade por trás de tudo, nomeada pela primeira vez

Todo elemento de todo curso até aqui, no fluxo normal ou no flexbox, compartilhou uma configuração que você nunca escreveu: position: static. É o valor padrão de uma propriedade que este curso finalmente nomeia.

.box {
  position: static; /* o padrão, declarado explicitamente */
}

O que static significa

Um elemento static segue o fluxo normal, como os cursos Layouts CSS e de flexbox descreveram. position faz algo novo. Ela decide se um elemento pode sair desse fluxo e ser colocado em outro lugar de propósito. static quer dizer "não", e é o padrão porque a maioria dos elementos pertence ao lugar onde o fluxo os coloca.

As propriedades de deslocamento não fazem nada em static

O CSS tem quatro propriedades de deslocamento, top, right, bottom e left, que afastam um elemento posicionado de um ponto de referência. Num elemento position: static, as quatro são ignoradas.

.box {
  position: static;
  top: 50px;    /* não tem efeito nenhum */
  left: 20px;   /* não tem efeito nenhum */
}

Não há erro nem aviso. O navegador só não as lê até position ser algo diferente de static. É o mecanismo deste curso: position é o interruptor, e os deslocamentos são controles que só respondem quando ele está ligado.

Quatro interruptores, não um

position tem quatro valores não static. Este curso cobre relative, absolute e fixed em aulas próprias. O quarto, sticky, é um híbrido: age como relative até a rolagem chegar ao deslocamento, e então fica preso como fixed enquanto o container estiver na tela. Cada valor responde de um jeito a "fora do fluxo ou não, e posicionado em relação a quê?".

static    → fluxo normal, deslocamentos ignorados (o padrão)
relative  → fluxo normal, deslocamentos deslocam da própria posição
absolute  → removido do fluxo, deslocamentos posicionam contra um ancestral
fixed     → removido do fluxo, deslocamentos posicionam contra a viewport

Por que este curso existe ao lado do flexbox

position e display: flex não competem; resolvem problemas diferentes. O flexbox organiza irmãos uns em relação aos outros, como uma fileira de cards ou os links de uma navbar. O posicionamento tira um elemento desse arranjo: um tooltip que não deve empurrar os vizinhos, um badge sobre o canto de um card, um cabeçalho que fica parado enquanto a página rola. Interfaces reais usam os dois, e a última aula deste curso os combina.

O que este curso cobre

• Aula 1, position: static: o padrão que todo elemento sempre teve (você está aqui)
• Aula 2, position: relative: deslocando um elemento enquanto ele mantém o lugar no fluxo
• Aula 3, position: absolute: fora do fluxo, posicionado em relação a um ancestral
• Aula 4, O padrão de contexto de posicionamento: relative e absolute trabalhando juntos
• Aula 5, position: fixed: ancorado na viewport, ignorando a rolagem
• Aula 6, z-index e ordem de empilhamento: decidindo qual elemento sobreposto fica por cima
• Aula 7, Juntando tudo: um card com um badge, um dropdown e um cabeçalho fixo

No final, você vai saber qual valor usar quando um elemento precisar escapar das regras de layout vistas até aqui.