Positionnement en jQuery

Pour travailler avec les coordonnées des éléments en jQuery, il existe les méthodes position et offset.

Ces méthodes servent à obtenir ou modifier les coordonnées actuelles d'un élément et comme résultat retournent un objet contenant les propriétés top et left.

Des erreurs dans les calculs peuvent survenir si l'utilisateur modifie les dimensions de la page. De plus, les méthodes n'obtiennent pas les coordonnées des éléments cachés.

La méthode offset obtient la position de l'élément par rapport au document, et position la position de l'élément par rapport aux marges du parent.

Supposons que nous ayons le code HTML suivant :

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

Des styles CSS sont attachés aux paragraphes :

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

Obtenons la position de la div test avec ces méthodes, et, en accédant aux clés de l'objet obtenu, afficheons ces informations ci-dessous dans les paragraphes :

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