Demonstração de Posições CSS

Conteúdo Principal

Esta é a coluna esquerda com conteúdo principal. Aqui você pode colocar artigos, vídeos, etc.

Static: Esta div tem position: static (padrão). Ela flui normalmente no documento.

Relative: Esta div tem position: relative com top: 10px e left: 20px. Ela é deslocada da sua posição normal.

Absolute (relativo ao pai): Esta div pai tem position: relative.

Esta div filha tem position: absolute com top: 20px e right: 20px. Ela é posicionada relativo ao pai.

Sticky: Esta div tem position: sticky com top: 80px. Role a página para ver ela grudar no topo após 80px.

Absolute (relativo ao viewport): Esta div tem position: absolute sem pai posicionado, então é relativo ao viewport (top: 200px, left: 50px).

Conteúdo longo para simular rolagem. Continue rolando para ver os elementos fixos e sticky em ação.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Esta é a coluna direita, similar ao exemplo do UOL.