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

Quelle est la différence entre position() et offset() ? J’ai essayé de faire les choses suivantes dans un événement de clic:

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

Et ils semblent retourner exactement les mêmes … (L’élément cliqué est dans une cellule de tableau dans un tableau)

Cela dépend du contexte dans lequel se trouve l’élément. position renvoie la position par rapport au parent de décalage et l’ offset fait de même par rapport au document . Evidemment, si le document est le parent offset, ce qui est souvent le cas, ils seront identiques.

Si vous avez une disposition comme celle-ci, cependant:

  

Ensuite, le offset pour sub sera 200: 200, mais sa position sera 0: 0.

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

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

Les deux fonctions renvoient un object simple avec deux propriétés: width et height.

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

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

MAIS lorsque la position CSS de l’object est “absolue”, les deux fonctions renverront width = 0 & height = 0