Pozicování v jQuery

Pro práci se souřadnicemi prvků v jQuery existují metody position a offset.

Tyto metody slouží k získání nebo změně currentních souřadnic prvku a jako výsledek vrací objekt obsahující vlastnosti top a left.

Chyby ve výpočtech mohou nastat, pokud uživatel mění velikost stránky. Také metody nezískávají souřadnice skrytých prvků.

Metoda offset získá pozici prvku vůči dokumentu, zatímco position pozici prvku vůči odsazení rodiče.

Předpokládejme, že máme následující HTML kód:

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

K odstavcům jsou připojeny CSS styly:

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

Získejme pozici divu test těmito metodami a přístupem ke klíčům získaného objektu vypišme tyto informace níže v odstavcích:

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