Pozicioniranje u jQuery

Za rad sa koordinatama elemenata u jQuery postoje metode position i offset.

Ove metode služe za dobijanje ili izmenu trenutnih koordinata elementa i kao rezultat vraćaju objekat, koji sadrži svojstva top i left.

Greške u proračunima mogu nastati ako korisnik menja veličinu stranice. Takođe, metode ne dobijaju koordinate skrivenih elemenata.

Metoda offset dobija poziciju elementa u odnosu na dokument, a position poziciju elementa u odnosu na marginu roditelja.

Neka imamo sledeći HTML kod:

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

Za paragrafe su postavljeni CSS stilovi:

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

Hajde da dobijemo poziciju div-a test ovim metodama, i, pristupivši ključevima dobijenog objekta, prikažemo tu informaciju ispod u paragrafima:

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