Poziționarea în jQuery

Pentru lucrul cu coordonatele elementelor în jQuery există metodele position și offset.

Aceste metode servesc pentru obținerea sau modificarea coordonatelor curente ale elementului și ca rezultat returnează un obiect care conține proprietățile top și left.

Erori în calcule pot apărea dacă utilizatorul schimbă dimensiunile paginii. De asemenea, metodele nu obțin coordonatele elementelor ascunse.

Metoda offset obține poziția elementului relativ la document, iar position poziția elementului relativ la marginile părintelui.

Să presupunem că avem următorul cod HTML:

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

Paragrafelor li s-au aplicat stiluri CSS:

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

Hai să obținem poziția div-ului test cu aceste metode și, accesând cheile obiectului obținut, să afișăm această informație mai jos în paragrafe:

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