Позиционирование в jQuery

Для работы с координатами элементов в jQuery есть методы position и offset.

Эти методы служат для получения или изменения текущих координат элемента и в качестве результата возвращают объект, содержащий свойства top и left.

Ошибки в вычислениях могут возникать, если пользователь меняет размеры страницы. Также методы не получают координаты скрытых элементов.

Метод offset получает позицию элемента относительно документа, а position позицию элемента относительно отступов родителя.

Пусть у нас есть следующий HTML код:

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

К абзацам привязаны CSS стили:

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

Давайте получим позицию дива test этими методами, и, обратившись к ключам полученного объекта, выведем эту информацию ниже в абзацах:

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