Propriedade position do CSS

Definição e uso

A propriedade position define o tipo de alinhamento do elemento.

Explicação

Esta propriedade define o mecanismo de posicionamento usado para estabelecer o layout do elemento. Qualquer elemento pode ser posicionado, mas elementos absolutos ou fixos geram uma caixa de bloco, independentemente do tipo do elemento. Elementos de posicionamento relativo se deslocam em relação à sua posição normal no fluxo.

Veja também:

Tutorial CSS:Posicionamento CSS

Manual de referência HTML DOM:Propriedade position

Exemplo

Posicionar o elemento h2:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Experimente você mesmo

Sintaxe CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

Valor do atributo

Valor Descrição
absolute

Gera um elemento de posicionamento absoluto, posicionando-o em relação ao primeiro pai que não seja static.

A posição do elemento é determinada pelas propriedades "left", "top", "right" e "bottom".
fixed

Gera um elemento de posicionamento absoluto, posicionando-o em relação à janela do navegador.

A posição do elemento é determinada pelas propriedades "left", "top", "right" e "bottom".
relative

Gera um elemento de posicionamento relativo, posicionando-o em relação à sua posição normal no fluxo.

Portanto, "left:20" adiciona 20 pixels ao LEFT do elemento.
static Valor padrão. Sem posicionamento, o elemento aparece no fluxo normal (ignora top, bottom, left, right ou declarações z-index).
inherit Deve-se herdar o valor da propriedade position do elemento pai.

Detalhes técnicos

Valor padrão: static
Herança: não
Versão: CSS2
Sintaxe JavaScript: object.style.position="absolute"

TIY Exemplo

Posicionamento: Posicionamento relativo
Este exemplo demonstra como posicionar o elemento em relação à posição normal do elemento.
Posicionamento: Posicionamento absoluto
Este exemplo demonstra como usar valores absolutos para posicionar o elemento.
Posicionamento: Posicionamento fixo
Este exemplo demonstra como posicionar o elemento em relação à janela do navegador.
Definir a forma do elemento
Este exemplo demonstra como definir a forma do elemento. Este elemento é cortado para dentro dessa forma e exibido.
Z-index
O Z-index pode ser usado para posicionar um elemento após outro.
Z-index
O elemento no exemplo acima mudou o Z-index.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0