funcion - position jquery w3schools

jQuery: diferencia entre position() y offset()

Question

¿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)

Answer 1

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/

Answer 2

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

Answer 3

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:

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

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