Propriedade de posição do estilo

Definição e uso

position Defina ou retorne o tipo de método de alinhamento do elemento (estático, relativo, absoluto ou fixo).

Veja também:

Tutorial CSS:Alinhamento CSS

Manual de referência CSS:Propriedade position

Exemplo

Exemplo 1

Mudar a posição do elemento <div> de relativa para absoluta:

document.getElementById("myDIV").style.position = "absolute";

Experimente você mesmo

Exemplo 2

Usar diferentes tipos de posicionamento:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Experimente você mesmo

Exemplo 3

Retorna a posição do elemento <h2>:

alert(document.getElementById("myH2").style.position);

Experimente você mesmo

Sintaxe

Retornar a propriedade position:

object.style.position

Definir a propriedade position:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Valor da propriedade

Valor Descrição
static Os elementos são apresentados na ordem em que aparecem no fluxo do documento. Padrão.
absolute O elemento é posicionado em relação ao primeiro ancestral posicionado (não estático) do elemento.
fixed O elemento é posicionado em relação à janela do navegador.
relative

O elemento é posicionado em relação à sua posição normal.

Portanto, "left:20" adiciona 20 pixels à posição lateral do elemento.
sticky

O elemento é posicionado com base na posição de rolagem do usuário.

Os elementos adesivos alternam entre relative e fixed com base na posição de rolagem.

É posicionado de forma relativa até encontrar a posição deslocada fornecida na vista, em seguida, ele 'cola' na posição apropriada (como position:fixed).

Comentário:Não é suportado no IE/Edge 15 ou versões anteriores. O Safari começou a suportar o prefixo Webkit a partir da versão 6.1.
initial Defina essa propriedade como seu valor padrão. Veja também initial。
inherit Herda essa propriedade do elemento pai. Veja também inherit。

Detalhes técnicos

Valor padrão: static
Retorno: Cadeia de caracteres, que representa o tipo de posição do elemento.
CSS versão： CSS2

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte