In questo breve articolo vogliamo illustrare come conoscere la posizione di un oggetto all’interno della pagina.
jQuery ci mette a disposizone 2 metodi.

Il metodo offset() consente di conoscere la distanza dall’alto e da sinistra di un elemento dalla pagina, mentre il metodo position() ci consente di conoscere la distanza di un oggetto da quello che lo contiene.

La sintassi è la stessa per entrambi i metodi.
Faremo un esempio di offset() per un oggetto posizionato in maniera assoluta, in modo da renderci immediatamente conto della correttezza di quanto realizzato.
Per prima cosa definiamo le regole css per l’oggetto di cui vogliamo conoscere la posizione.

Successivamente nel tag body della nostra pagina inseriamo:

In questo modo verrà insertio nella pagina un quadrato blu.

Sotto alla linea di codice del box inseriamo il codice jQuery:

var elem=$('#box');
var offset = elem.offset();
alert( "left: " + offset.left + ", top: " + offset.top );

Per prima cosa definiamo una variabile elem che referenzia l’oggetto di cui vogliamo conoscere la posizione, come secondo passo definiamo una variabile offset che conterrà l’offset dell’elemento, a questo punto abbaimo tutti gli elementi necessari e possiamo visualizzare la distanza dall’altro mediante offset.top e da sinistra con offset.left.

L’utilizzo di position() è del tutto analogo, vi consiglio di fare qualche prova.