Gerador da propriedade CSS position

Alterne entre os 5 valores de position do CSS (static, relative, absolute, fixed, sticky) em uma interface gráfica, veja o efeito de top/right/bottom/left e z-index em tempo real e gere o código CSS gratuitamente.

Dicas

Mude para position: relative e defina top/left para deslocar visualmente a Caixa B de sua posição original — repare que a Caixa C (o elemento seguinte) não se move nem um pouco.
Ao mudar para absolute ou fixed, a Caixa B é completamente removida do fluxo normal, então a Caixa C se desloca para ocupar o espaço deixado por ela.
z-index controla a ordem de sobreposição quando elementos se sobrepõem, mas não tem efeito algum em elementos com position: static — mude o position antes de testar "Definir z-index".
position: sticky só funciona dentro de um contêiner com rolagem. Role a própria caixa de pré-visualização para ver o elemento travar no lugar no meio do caminho.
O código CSS gerado pode ser copiado e colado diretamente na sua própria folha de estilos — teste em uma página real para confirmar que o visual é o mesmo.

Perguntas frequentes

absolute é posicionado em relação ao ancestral posicionado mais próximo (o pai mais próximo cujo position não seja static); se não existir nenhum, acaba usando o bloco de contenção inicial da página. fixed, por outro lado, é sempre posicionado em relação à viewport do navegador, então permanece no mesmo lugar da tela mesmo quando a página é rolada.

As causas mais comuns são um elemento pai com overflow: hidden ou overflow: auto, um pai cuja altura mal ultrapassa a do próprio elemento sticky (sem espaço para travar) ou simplesmente esquecer de definir um deslocamento como top. Além disso, o efeito de sticky fica restrito ao contêiner pai, então esse contêiner precisa realmente funcionar como uma área com rolagem.

relative desloca visualmente um elemento em relação à posição que ele ocuparia como um elemento normal com position: static, de acordo com os valores de top/right/bottom/left definidos. O ponto-chave é que o espaço originalmente ocupado no layout continua reservado — essa é a grande diferença em relação ao absolute, que remove o elemento do fluxo por completo.

z-index só afeta elementos que não sejam position: static (ou seja, relative, absolute, fixed ou sticky). Também pode não se comportar como esperado se um elemento pai criar seu próprio contexto de empilhamento — por exemplo, usando transform ou opacity junto com position — pois o z-index dos filhos fica então restrito a esse contexto.

O truque mais comum é adicionar position: relative ao elemento pai que você quer usar como referência. Nem é preciso definir valores de deslocamento: basta adicionar position: relative para transformá-lo em um "elemento posicionado", e qualquer descendente absolute será posicionado em relação às bordas internas desse elemento.

Curiosidade — O longo caminho até a padronização do position: sticky

O CSS tem static, relative, absolute e fixed desde seus primórdios, mas criar um cabeçalho ou barra lateral que só travasse no lugar depois de rolar além de certo ponto exigia, por muito tempo, observar eventos de rolagem com JavaScript e alternar manualmente para position: fixed. Não havia forma de expressar esse comportamento apenas com CSS.

A ideia por trás do position: sticky já foi proposta por volta de 2012 na especificação CSS Positioned Layout Module Level 3, mas se mostrou difícil de implementar bem. O Safari lançou uma versão inicial com prefixo de fornecedor (-webkit-sticky) por volta de 2013, o Chrome só passou a suportar a palavra-chave padrão sticky em 2017, e foi somente por volta de 2020 que todos os principais navegadores, incluindo o Firefox, ofereciam suporte confiável e consistente.

Sob o capô, o comportamento de "travar no meio da rolagem" do sticky é melhor descrito como um híbrido de relative e fixed: o elemento se comporta como relative em circunstâncias normais e passa a se comportar como fixed assim que a posição de rolagem atinge o deslocamento definido. Essa mudança só acontece dentro do intervalo de rolagem do elemento pai — motivo pelo qual o sticky costuma parecer que "não funciona" quando o overflow ou a altura do pai atrapalham.

Hoje, sticky é uma técnica consagrada no design web: fixar a linha de cabeçalho de uma tabela, manter um sumário visível durante a rolagem, entre outros usos. Eliminar a necessidade de escutar a rolagem via JavaScript foi um ganho real tanto em desempenho quanto em simplicidade do código.

Ver todas as curiosidades

Gerador da propriedade CSS position

Dicas

Perguntas frequentes

Qual é a diferença entre absolute e fixed?

Por que position: sticky não funciona?

Em relação a que exatamente o position: relative se posiciona?

Por que z-index não muda a ordem de sobreposição mesmo depois de definido?

Como defino o bloco de contenção em relação ao qual um elemento absolute é posicionado?

Curiosidade — O longo caminho até a padronização do position: sticky