jQuery: diferença entre position () e offset ()

178

Qual é a diferença entre position()e offset()? Tentei fazer o seguinte em um evento de clique:

console.info($(this).position(), $(this).offset());

E eles parecem retornar exatamente o mesmo ... (O elemento clicado está dentro de uma célula da tabela)

jquery positioning

— Svish
fonte

215

Se são iguais, depende do contexto.

positionretorna um {left: x, top: y}objeto em relação ao pai de deslocamento
offsetretorna um {left: x, top: y}objeto relativo ao documento .

Obviamente, se o documento for o pai de deslocamento, o que geralmente ocorre, eles serão idênticos. O pai de deslocamento é "o elemento contendo o mais próximo posicionado".

Por exemplo, com este documento:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

Então o $('#sub').offset() será {left: 200, top: 200}, mas .position()será {left: 0, top: 0}.

— David Hedlund
fonte

2

Então o pai de deslocamento é o primeiro pai com a posição definida como absoluta? ou?

— Svish

1

@ Skish: uau, eu realmente senti falta do travessão do código? thaks para a edição. sim, o pai de deslocamento é o pai mais próximo posicionado . isto é, um elemento com a posição definida como absoluta, relativa ou fixa (mas não estática). Se não é um jQuery ou mesmo um javascript, você tem o mesmo comportamento em css: se você atribuir subum posicionamento absoluto a 0: 0, ele estará no canto superior esquerdo do pai de deslocamento.

— David Hedlund

1

FYI, .positionatualizado em 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

Não é contrário ao ponto de vista instintivo? Isso é tão arbitrário! Para mim, um "ponto" absoluto é uma posição. Um "ponto" relativo é um deslocamento.

— Sandburg

28

O método .offset () nos permite recuperar a posição atual de um elemento em relação ao documento . Compare isso com .position () , que recupera a posição atual em relação ao pai de deslocamento . Ao posicionar um novo elemento em cima de um elemento existente para manipulação global (em particular, para implementar arrastar e soltar), .offset () é o mais útil.

Fonte: http://api.jquery.com/offset/

— jAndy
fonte

3

Como perguntado acima, o que é considerado o pai de deslocamento? Parece que a posição de chamada () na primeira div dentro de outra div nem sempre retorna 0,0 - mesmo quando não há nenhum outro estilo ou posicionamento em andamento.

— Kokodoko

2

jquery.offsetParent (): api.jquery.com/offsetparent "Obtenha o elemento ancestral mais próximo que está posicionado."

— Curtis Yallop

-6

Ambas as funções retornam um objeto simples com duas propriedades: largura e altura.

offset () refere-se à posição relativa ao documento.

position () refere-se à posição relativa ao seu elemento pai

MAS quando a posição css do objeto for "absoluta", ambas as funções retornarão width = 0 & height = 0

— dwoutsourcing
fonte

6

Correção: offset e position retornam um objeto com propriedades esquerda e superior, não largura e altura.

— Jorge Olivares