Posicionamiento en jQuery

Para trabajar con las coordenadas de los elementos en jQuery existen los métodos position y offset.

Estos métodos sirven para obtener o cambiar las coordenadas actuales del elemento y como resultado devuelven un objeto que contiene las propiedades top y left.

Pueden producirse errores en los cálculos si el usuario cambia las dimensiones de la página. Además, los métodos no obtienen las coordenadas de los elementos ocultos.

El método offset obtiene la posición del elemento relativa al documento, y position la posición del elemento relativa a los márgenes del padre.

Supongamos que tenemos el siguiente código HTML:

html<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

Los estilos CSS están vinculados a los párrafos:

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

Obtengamos la posición del div test con estos métodos, y, accediendo a las claves del objeto obtenido, mostremos esta información abajo en los párrafos:

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) left: ' + position.left + ', top: ' + position.top
);