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

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