Позициониране в 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;
}

Нека получим позицията на div 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
);