jQuery: Différence entre position () et offset ()

Quelle est la différence entre position()et offset()? J'ai essayé de faire ce qui suit dans un événement de clic:

console.info($(this).position(), $(this).offset());

Et ils semblent renvoyer exactement le même ... (L'élément cliqué se trouve dans une cellule de tableau dans un tableau)

Le fait qu'ils soient identiques dépend du contexte.

• positionrenvoie un {left: x, top: y}objet relatif au parent offset

• offsetrenvoie un {left: x, top: y}objet relatif au document .

Évidemment, si le document est le parent offset, ce qui est souvent le cas, ceux-ci seront identiques. Le parent offset est «l'élément contenant le plus proche».

Par exemple, avec ce document:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

Alors le $('#sub').offset() sera {left: 200, top: 200}, mais ce .position()sera {left: 0, top: 0}.

La méthode .offset () nous permet de récupérer la position actuelle d'un élément par rapport au document . Comparez cela avec .position () , qui récupère la position actuelle par rapport au parent offset . Lors du positionnement d'un nouvel élément au-dessus d'un élément existant pour une manipulation globale (en particulier, pour l'implémentation du glisser-déposer), .offset () est le plus utile.

Source: http://api.jquery.com/offset/

Les deux fonctions renvoient un objet simple avec deux propriétés: largeur et hauteur.

offset () fait référence à la position par rapport au document.

position () fait référence à la position par rapport à son élément parent

MAIS quand la position css de l'objet est "absolue", les deux fonctions renverront width = 0 & height = 0