jQuery: diferencia entre posición () y desplazamiento ()

178

¿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 seleccionado está dentro de una celda de tabla en una tabla)

jquery positioning Svish
fuente

Respuestas:

215

Si son iguales depende del contexto.

  • positiondevuelve un {left: x, top: y}objeto relativo al padre desplazado

  • offsetdevuelve un {left: x, top: y}objeto relativo al documento .

Obviamente, si el documento es el padre desplazado, que suele ser el caso, estos serán idénticos. El padre compensado es "el elemento que contiene la posición más cercana".

Por ejemplo, con este documento:

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

Entonces el $('#sub').offset() será {left: 200, top: 200}, pero .position()será {left: 0, top: 0}.

David Hedlund
fuente
2
Entonces, ¿el padre desplazado es el primer padre con la posición establecida en absoluto? ¿o?
Svish
1
@Svish: whoa, ¿realmente extrañé la sangría del código? Gracias por la edición. Sí, el padre desplazado es el padre posicionado más cercano . es decir, un elemento con posición establecida en absoluto, relativo o fijo (pero no estático). esto no es un jQuery o incluso una cosa de javascript, tiene el mismo comportamiento en css: si tuviera que dar subun posicionamiento absoluto a 0: 0, entonces estará en la esquina superior izquierda del padre desplazado.
David Hedlund
1
Para su información, .positionse actualizó en 1.12.0 => github.com/jquery/jquery/issues/1708
retrovertigo
¿No es opuesto al punto de vista instintivo? ¡Esto es tan arbitrario! Para mí, un "punto" absoluto es una posición. Un "punto" relativo es un desplazamiento.
Sandburg el
28

El método .offset () nos permite recuperar la posición actual de un elemento en relación con el documento . Contraste esto con .position () , que recupera la posición actual en relación con el padre desplazado . Cuando se coloca un nuevo elemento encima de uno existente para la manipulación global (en particular, para implementar arrastrar y soltar), .offset () es lo más útil.

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

jAndy
fuente
3
Como se preguntó anteriormente, ¿qué se considera el padre compensado? Parece que llamar a position () en el primer div dentro de otro div no siempre devuelve 0,0, incluso cuando no hay otro estilo o posicionamiento.
Kokodoko
2
jquery.offsetParent (): api.jquery.com/offsetparent "Obtenga el elemento ancestro más cercano que esté posicionado".
Curtis Yallop
-6

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

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

position () 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 ancho = 0 y altura = 0

dwoutsourcing
fuente
66
Corrección: desplazamiento y posición devuelve un objeto con propiedades izquierda y superior, no ancho y alto.
Jorge Olivares