Positionering i jQuery

Til at arbejde med elementers koordinater i jQuery findes der metoderne position og offset.

Disse metoder bruges til at hente eller ændre elementets aktuelle koordinater og returnerer som resultat et objekt, der indeholder egenskaberne top og left.

Fejl i beregninger kan opstå, hvis brugeren ændrer sidens størrelse. Metoderne kan heller ikke hente koordinater for skjulte elementer.

Metoden offset henter elementets position i forhold til dokumentet, mens position henter positionen i forhold til forælderens margener.

Lad os sige, at vi har følgende HTML-kode:

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

Følgende CSS-stile er knyttet til afsnittene:

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

Lad os hente positionen for div'en test med disse metoder, og ved at tilgå nøglerne i det opnåede objekt, vise denne information nedenfor i afsnit:

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