Posizionamento in jQuery

Per lavorare con le coordinate degli elementi in jQuery ci sono i metodi position e offset.

Questi metodi servono per ottenere o modificare le coordinate correnti di un elemento e come risultato restituiscono un oggetto, contenente le proprietà top e left.

Errori nei calcoli possono verificarsi se l'utente cambia le dimensioni della pagina. Inoltre, i metodi non ottengono le coordinate degli elementi nascosti.

Il metodo offset ottiene la posizione dell'elemento relativa al documento, mentre position la posizione dell'elemento relativa ai margini del genitore.

Supponiamo di avere il seguente codice HTML:

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

Ai paragrafi sono associati gli stili CSS:

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

Otteniamo la posizione del div test con questi metodi e, accedendo alle chiavi dell'oggetto ottenuto, visualizziamo queste informazioni qui sotto nei paragrafi:

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