Posicionamento Estático e Relativo

A propriedade position controla como um elemento é colocado no fluxo do documento. Os cinco valores são: static, relative, absolute, fixed e sticky.

Por padrão, todo elemento usa position: static. Elementos estáticos seguem o fluxo normal do documento — elementos de bloco são empilhados verticalmente, e elementos em linha fluem da esquerda para a direita. As propriedades de deslocamento (top, right, bottom, left) não têm efeito.

position: relative mantém o elemento no fluxo normal, mas permite deslocá-lo em relação à sua própria posição normal usando top, right, bottom e left.

Ao usar position: relative com deslocamentos, o elemento se move visualmente, mas seu espaço original no layout continua reservado. Os outros elementos não preenchem o espaço vazio.

As propriedades de deslocamento movem o elemento a partir do seu ponto de referência:

• top: move para baixo a partir da borda superior
• left: move para a direita a partir da borda esquerda
• Valores negativos invertem a direção

z-index só funciona em elementos posicionados (não estáticos). Se precisar controlar a ordem das camadas, defina pelo menos position: relative.

O uso mais importante de position: relative é transformar um elemento no bloco de contenção dos filhos posicionados de forma absoluta — mesmo sem nenhum valor de deslocamento.

Combinar position: relative com transform cria um novo contexto de empilhamento. O elemento permanece no fluxo, mas pode ser transformado visualmente.

Evite definir position: relative em todos os elementos. Isso cria contextos de empilhamento que podem complicar o gerenciamento de z-index. Use-o apenas quando precisar de deslocamentos ou de um ponto de ancoragem para filhos posicionados de forma absoluta.

Como o posicionamento relativo não afeta o fluxo do layout, pode animar top/left com segurança para criar efeitos visuais — embora animar transform: translate() ofereça melhor desempenho.

Nas DevTools, consulte o painel de valores calculados para ver o valor efetivo de position. O diagrama do modelo de caixa mostra as coordenadas exatas de deslocamento aplicadas.

O que acontece com o espaço de um elemento no layout quando aplica position: relative; top: 20px?

position: static é o padrão — sem deslocamentos e sem empilhamento. position: relative permite deslocamentos a partir da própria posição do elemento e preserva seu espaço no layout. Seu papel mais importante é atuar como bloco de contenção para filhos posicionados de forma absoluta.