jQuery

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

Vamos a repasar la función de jQuery position() que tiene como funcionalidad obtener las coordenadas del elemento seleccionado relativas al elemento padre. Es muy similar a la función offset().

La diferencia entre offset() y position() es:

offset(): Establece o devuelve las coordenadas de un elemento respecto al documento/web contenedor del mismo (toda la web).
position(): Establece o devuelve las coordenadas de un elemento relativas al elemento padre.

Otras funciones de jQuery interesantes son:

Sintaxis de la función de jQuery position()

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.

Ejemplo de jQuery position()

Os pongo un sencillo ejemplo de position():

$(document).ready(function(){
  $("#boton").click(function(){
  var coordenadas = $("#parrafo").position();
  $("#parrafo").html("Y: " + coordenadas.top + " X: " + coordenadas.left);
 });    
});

Os explico el ejemplo:

Detectamos el click en el botón con id = “boton”.
En la variable coordenadas guardamos el objeto con las coordenadas el elemento con id = “parrafo”.
Por último en el elemento con id = “parrafo” mediante la función html() mostramos las coordenadas de dicho elemento.