jQuery: diferencia entre position () y offset ()

¿Cuál es la diferencia entre position() y offset() ? Traté de hacer lo siguiente en un evento de clic:

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

Y parecen devolver exactamente lo mismo … (El elemento cliqueado se encuentra dentro de una celda de tabla en una tabla)

Eso depende del contexto en el que se encuentre el elemento. position devuelve la posición relativa al elemento primario desplazado , y offset hace lo mismo en relación con el documento . Obviamente, si el documento es el padre compensado, que a menudo es el caso, estos serán idénticos.

Sin embargo, si tienes un diseño como este:

  

Entonces el offset para sub será 200: 200, pero su position será 0: 0.

El método .offset () nos permite recuperar la posición actual de un elemento relativo al documento . Contraste esto con .position () , que recupera la posición actual relativa al padre de desplazamiento . Al posicionar un nuevo elemento encima de uno existente para la manipulación global (en particular, para implementar la función de arrastrar y soltar), .offset () es más útil.

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

Ambas funciones devuelven un objeto simple con dos propiedades: ancho y alto.

offset () se refiere a la posición relativa al documento.

posición () se refiere a la posición relativa a su elemento padre

PERO cuando la posición css del objeto es “absoluta”, ambas funciones devolverán width = 0 & height = 0