Posicionamento em jQuery

Para trabalhar com as coordenadas dos elementos em jQuery existem os métodos position e offset.

Estes métodos servem para obter ou alterar as coordenadas atuais de um elemento e, como resultado, retornam um objeto contendo as propriedades top e left.

Erros nos cálculos podem ocorrer se o usuário alterar o tamanho da página. Além disso, os métodos não obtêm as coordenadas de elementos ocultos.

O método offset obtém a posição do elemento em relação ao documento, e o position a posição do elemento em relação às margens do elemento pai.

Suponha que temos o seguinte código HTML:

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

Os estilos CSS estão aplicados aos parágrafos:

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

Vamos obter a posição da div test usando estes métodos e, acessando as chaves do objeto obtido, exibir essa informação abaixo nos parágrafos:

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