Posição - CSS-Tricks | CSS Almanac 2025

A positionpropriedade pode ajudá-lo a manipular a localização de um elemento, por exemplo:

.element ( position: relative; top: 20px; )

Em relação à sua posição original, o elemento acima agora será deslocado para baixo em 20 px. Se animarmos essas propriedades, podemos ver quanto controle isso nos dá (embora não seja uma boa ideia por motivos de desempenho):

relativeé apenas um dos seis valores da positionpropriedade. Aqui estão os outros:

Valores

static: cada elemento tem uma posição estática por padrão, então o elemento manterá o fluxo normal da página. Portanto, se houver um conjunto de índice z esquerdo / direito / superior / inferior / z, não haverá efeito nesse elemento.
relative: a posição original de um elemento permanece no fluxo do documento, assim como o staticvalor. Mas agora esquerda / direita / superior / inferior / índice z funcionará. As propriedades posicionais “empurram” o elemento da posição original naquela direção.
absolute: o elemento é removido do fluxo do documento e outros elementos se comportarão como se nem estivessem lá, enquanto todas as outras propriedades posicionais funcionarão nele.
fixed: o elemento é removido do fluxo do documento como elementos absolutamente posicionados. Na verdade, eles se comportam quase da mesma forma, apenas os elementos de posição fixa são sempre relativos ao documento, não a qualquer pai em particular, e não são afetados pela rolagem.
sticky(experimental): o elemento é tratado como um relativevalor até que a localização de rolagem da janela de visualização atinja um limite especificado, ponto em que o elemento assume uma fixedposição onde é dito para ficar.
inherit: o positionvalor não é cascateado, então isso pode ser usado para forçá-lo especificamente para e inherito valor de posicionamento de seu pai.

Absoluto

Se um elemento filho tiver um absolutevalor, o elemento pai se comportará como se o filho nem existisse:

.element ( position: absolute; )

E quando tentamos definir outros valores, tais como left, bottome rightnós vamos descobrir que o elemento filho é responder não às dimensões de seu pai, mas o documento:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Para fazer com que o elemento filho seja posicionado absolutamente a partir de seu elemento pai, precisamos definir isso no próprio elemento pai:

.parent ( position: relative; )

Agora propriedades, tais como left, right, bottome topirá se referir ao elemento pai, para que se fizermos o elemento filho transparente podemos vê-lo sentado à direita na parte inferior do pai:

Fixo

O fixedvalor é semelhante a absolute, pois pode ajudá-lo a posicionar um elemento em qualquer lugar relativo ao documento; no entanto, esse valor não é afetado pela rolagem. Veja o elemento filho na demonstração abaixo e como, depois de rolar, ele continua colado na parte inferior da página:

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada	Raposa de fogo	IE	Beira	Safári
4	2	7	12	3,1

Celular / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Pegajoso

O stickyvalor é como um meio-termo entre os valores relativee fixed. No momento em que este artigo foi escrito, é atualmente um valor experimental, o que significa que não faz parte das especificações oficiais e apenas parcialmente adotado por navegadores selecionados. Em outras palavras, provavelmente não é a melhor ideia usar isso em um site de produção ao vivo.

O que isso faz? Bem, ele permite que você posicione um elemento em relação a qualquer coisa no documento e, em seguida, uma vez que um usuário tenha passado de um certo ponto na janela de visualização, fixe a posição do elemento naquele local para que permaneça persistentemente exibido como um elemento com um fixedvalor.

Veja o seguinte exemplo:

.element ( position: sticky; top: 50px; )

O elemento ficará relativamente posicionado até que a localização de rolagem da janela de visualização alcance um ponto em que o elemento estará 50pxna parte superior da janela de visualização. Nesse ponto, o elemento se torna pegajoso e permanece em uma fixedposição 50pxsuperior da tela.

A demonstração a seguir ilustra esse ponto, onde a navegação superior é o relativeposicionamento padrão e a segunda navegação é definida para stickyo topo da janela de visualização. Observe que a demonstração só funcionará no Chrome, Safari e Opera no momento da redação deste artigo.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.