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.

Última atualização: 2026-09-20

Comparar os cinco valores de position

`position` é a propriedade que decide onde um elemento se assenta, e toma cinco valores: `static`, `relative`, `absolute`, `fixed` e `sticky`. Esta ferramenta permite trocar entre eles enquanto confirma na hora como `top`, `right`, `bottom`, `left` e `z-index` se comportam, para depois gerar o CSS.

**Quando um elemento colocado com `absolute` vai parar num lugar inesperado, a causa é quase sempre a mesma: ele se posiciona em relação ao ancestral mais próximo cujo `position` não seja `static`.** Se não existe tal ancestral, o elemento recai sobre a página inteira. **Esquecer `position: relative` no pai** explica quase todos os casos. **O `sticky` tem um tropeço bem conhecido próprio: um `overflow: hidden` ou `overflow: auto` em qualquer ponto da ascendência impede que ele adira.** E como `z-index` fica confinado numa unidade aninhada chamada contexto de empilhamento, **um elemento dentro de um contexto situado abaixo de outro não pode erguer-se sobre ele por maior que seja o valor.**

Como se usa

Troque o valor de position Provar os cinco por vez mostra em que difere aquilo em relação ao qual cada um se posiciona.
Mova os deslocamentos **Confirme que `top` e seus companheiros não surtem efeito algum enquanto o valor for `static`.**
Troque z-index Você pode ver como a ordem de empilhamento se altera.
Copie o CSS gerado Assim que a colocação for a buscada, pode ser colada diretamente no seu código.

Dicas para aproveitar melhor

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.

Quando é útil

Aderir um cabeçalho ao alto da vista

**Com `sticky`, o cabeçalho permanece no seu lugar enquanto a página rola.**

Sobrepor um distintivo ou um ícone a um canto

`relative` no pai com `absolute` no filho é o padrão básico.

Colocar um botão fixo

`fixed` se posiciona em relação à janela, então não se move ao rolar a página.

Investigar um problema de empilhamento

**Quando um elemento se esconde sob outro, a primeira coisa a suspeitar é um contexto de empilhamento.**

Termos de position

Static: O valor inicial. **Enquanto vigora, nem os deslocamentos como `top` nem `z-index` surtem efeito algum.**
Relative: Desloca o elemento **de onde de outro modo teria estado.** Ele se move, e ainda assim o espaço de onde partiu fica reservado.
Absolute: **Posiciona-se em relação ao ancestral mais próximo cujo `position` não seja `static`.** Na falta dele, serve a página inteira.
Fixed: Posiciona-se em relação à janela, de modo que o elemento permanece por mais longe que a página role.
Sticky: Assenta-se no seu lugar corrente até alcançar um deslocamento dado, e então adere. **Um `overflow` num ancestral impede que funcione.**
Contexto de empilhamento: A unidade aninhada dentro da qual a ordem de empilhamento se decide. **Um `z-index` dentro de um não pode ser comparado diretamente com os elementos de fora.**

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