¿Cuál es la diferencia entre position() y offset()? Traté de hacer lo siguiente en un evento de clic:jQuery: Diferencia entre posición() y desplazamiento()
console.info($(this).position(), $(this).offset());
y que parecen volver exactamente lo mismo ... (El elemento se ha hecho clic es dentro de una celda en una tabla)
Eso depende de qué contexto el elemento está en position devuelve la posición en relación con el padre de compensación 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.
Si usted tiene un diseño de este tipo, sin embargo:
<div style="position: absolute; top: 200; left: 200;">
<div id="sub"></div>
</div>
Entonces el offset para sub habrá 200: 200, pero su position será 0: 0.
El 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 origen 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/
Como pedido anteriormente, lo que 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 en marcha. – Kokodoko
jquery.offsetParent(): http://api.jquery.com/offsetparent/ "Obtener el elemento ancestro más cercano que está posicionado". –
Ambas funciones devuelven un objeto simple con dos propiedades: ancho & 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 "absolutos" ambas funciones volverá width = 0 & height = 0
Corrección : offset y position devuelve un objeto con las propiedades izquierda y superior, no ancho y alto. –
Entonces, ¿el padre desplazado es el primer padre con la posición establecida en absoluta? ¿o? – Svish
@Svish: whoa, ¿realmente extrañé la sangría del código? thaks para la edición. sí, el padre desplazado es el padre más cercano * posicionado *. es decir, un elemento con una posición establecida en absoluta, relativa o fija (pero no estática). esto no es una jQuery o incluso una cosa de javascript, usted tiene el mismo comportamiento en css: si tuviera que dar un posicionamiento absoluto 'sub' a 0: 0, entonces estará en la esquina superior izquierda de la matriz de desplazamiento. –
¡Impresionante, entonces tiene mucho sentido! (No hay problema con la edición, jeje. Lo hago todo el tiempo: p) – Svish