Diferencias entre jQuery position() y offset() para obtener coordenadas de elementos

Sencillo post para ver las diferencias entre las funciones de jQuery position() y offset(), estas tienen como finalidad obtener o establecer las coordenadas de elementos.

Otras funciones de jQuery interesantes son:

• css()
• width()
• height()
• animate()

Sintaxis de jQuery offset()

jQuery offset() establece o devuelve las coordenadas de un elemento relativas al documento/web. Repasemos su sintaxis extraída de su web oficial:

/* obtener valor */$(selector).offset();
/* establecer valor */$(selector).offset({top:value,left:value});

Os explico las 2 sintaxis superiores:

• selector (Obligatorio): Elemento selector del cual queremos obtener o establecer sus coordenadas.
• En la primera sintaxis estaríamos obteniendo las coordenadas de un elemento. Devuelve un objeto con 2 propiedades (top y left) del primer elemento buscado.
• En la segunda establecemos con las coordenadas top y left la posición de dicho elemento.

Más info y ejemplos en el post:

• jQuery offset(): Obtener o establecer las coordenadas de un elemento

Sintaxis de jQuery position()

jQuery position() establece o devuelve las coordenadas de un elemento relativas al elemento padre (Contendor). Repasemos la sintaxis extraída de su página web oficial:

$(selector).position()

Repasemos el único parámetro de la sintaxis superior con la que obtenemos un objeto con las propiedades (Coordenadas) top y left:

• selector (Obligatorio): Es el elemento selector del cual queremos obtener su posición.

Más info y ejemplos en el post:

• jQuery position(): Obtener la posición de un elemento

Diferencias entre jQuery position() y offset()

La función position() nos devuelve la posición de un elemento respecto a otro (Padre/hijo o contendor), en cambio offset() devuelve la posición relativa al documento.