Позиционирование в jQuery
Для работы с координатами элементов в jQuery
есть методы position
и offset.
Эти методы служат для получения или изменения
текущих координат элемента и в качестве результата
возвращают объект, содержащий свойства top
и left.
Ошибки в вычислениях могут возникать, если пользователь меняет размеры страницы. Также методы не получают координаты скрытых элементов.
Метод offset получает позицию элемента
относительно документа, а position позицию
элемента относительно отступов родителя.
Пусть у нас есть следующий HTML код:
<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>
К абзацам привязаны CSS стили:
#parent {
width: 150px;
border: 1px solid blueviolet;
}
#test {
margin: 5px;
text-align: center;
outline: 1px solid green;
}
Давайте получим позицию дива test этими
методами, и, обратившись к ключам полученного
объекта, выведем эту информацию ниже в абзацах:
let 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
);