Пазіцыянаванне ў 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
);