Pozycjonowanie w jQuery

Do pracy ze współrzędnymi elementów w jQuery są metody position i offset.

Te metody służą do uzyskiwania lub zmiany bieżących współrzędnych elementu i w wyniku zwracają obiekt zawierający właściwości top i left.

Błędy w obliczeniach mogą powstawać, jeśli użytkownik zmienia rozmiary strony. Również metody nie uzyskują współrzędnych ukrytych elementów.

Metoda offset uzyskuje pozycję elementu względem dokumentu, a position pozycję elementu względem marginesów rodzica.

Załóżmy, że mamy następujący kod HTML:

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

Do akapitów są przypisane style CSS:

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

Pobierzmy pozycję diva test tymi metodami i, odwołując się do kluczy otrzymanego obiektu, wypiszmy te informacje poniżej w akapitach:

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