Pozicionovanie v jQuery

Pre prácu so súradnicami prvkov v jQuery existujú metódy position a offset.

Tieto metódy slúžia na získanie alebo zmenu aktuálnych súradníc prvku a ako výsledok vracajú objekt obsahujúci vlastnosti top a left.

Chyby vo výpočtoch môžu vzniknúť, ak používateľ zmení veľkosť stránky. Tiež metódy nezískavajú súradnice skrytých prvkov.

Metóda offset získava pozíciu prvku vzhľadom na dokument, a position pozíciu prvku vzhľadom na okraje rodiča.

Majme nasledujúci HTML kód:

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

K odsekom sú pripojené CSS štýly:

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

Získajme pozíciu divu test týmito metódami a, prístupom k kľúčom získaného objektu, vypíšme túto informáciu nižšie do odsekov:

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