Demonstração das Posições CSS

Cada uma das caixas abaixo demonstra um comportamento diferente de posicionamento CSS:

POSITION: STATIC (padrão)

Elementos com position: static seguem o fluxo normal do documento. Os valores top, right, bottom e left não têm efeito.

Caixa Static
Outra Caixa Static

Estas caixas estão em seu fluxo normal.

POSITION: RELATIVE e ABSOLUTE (relativo ao pai)

A caixa azul tem position: relative e foi deslocada 10px para baixo e 20px para a direita de sua posição original.

Caixa Relative

A caixa laranja tem position: absolute e está posicionada em relação a este container (que tem position: relative).

Caixa Absolute (relativa ao pai)

Explicação dos comportamentos:

  • Static: Segue o fluxo normal da página.
  • Relative: Posicionado relativamente à sua posição normal.
  • Absolute: Posicionado em relação ao ancestral posicionado mais próximo.
  • Fixed: Posicionado em relação à viewport (não se move ao rolar).
  • Sticky: Alterna entre relative e fixed baseado no scroll.

Conteúdo de Exemplo para Testar o Scroll

Role a página para observar como os diferentes elementos se comportam:

Título de Seção 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Título de Seção 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Título de Seção 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Título de Seção 4

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

Título de Seção 5

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.