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()

1	$(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);
	});   	
});

$(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.

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

Sintaxis de la función de jQuery position()

Ejemplo de jQuery position()

Uso de cookies