ejemplos de obtener posición absoluta de un div con JQuery

ejemplos de obtener posición absoluta de un div con JQuery

ejemplos de obtener posición absoluta de un div con JQuery

para obtener la posición absoluta de un elemento utilizando la librería jQuery utilizaremos el método offset del elemento del cual queremos obtener su posición en pantalla.

en el siguiente ejemplo puedes ver que hemos utilizado el evento Click del botón para poner en una variable, en este caso X, el resultado de ejecutar el método offset del párrafo. Una vez hemos hecho esto, ya podemos utilizar la propiedad top y la propiedad left de dicho objeto para saber exactamente dónde está posicionado

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").offset();
alert("Arriba: " + x.top + " Izquierda: " + x.left);
});
});
</script>
</head>
<body>

<p>Videotutoriales.es.</p>

<button>Devuelve las coordenadas de un elemento</button>

</body>
</html>

y en este otro ejemplo te enseño cómo posicionar un objeto en una posición concreta de la pantalla utilizando el método offset de jQuery como hemos hecho anteriormente pero en este caso en lugar de obtener la posición lo que vamos a hacer es asignar una posición

para ello lo que hemos hecho es en el evento Click del botón directamente asignar al elemento en este caso un párrafo por medio del método offset las propiedades top y left a 200px

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset({top: 200, left: 200});
});
});
</script>
</head>
<body>

<p>videotutoriales.es</p>

<button>Pulsare para posicionar el párrafo</button>

</body>
</html>