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

179

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)

jquery positioning

— Svish
source

216

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}.

— David Hedlund
source

2

Donc, le parent offset est le premier parent dont la position est définie sur absolue? ou?

— Svish

1

@Svish: whoa, ai-je vraiment manqué le retrait de code? thaks pour l'édition. oui, le parent offset est le parent positionné le plus proche . c'est-à-dire un élément dont la position est définie sur absolue, relative ou fixe (mais pas statique). ce n'est pas une jQuery ou même une chose javascript, vous avez le même comportement en css: si vous deviez donner subun positionnement absolu à 0: 0, alors ce sera dans le coin supérieur gauche du parent offset.

— David Hedlund

1

FYI, .positionmis à jour dans 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

N'est-ce pas le contraire du point de vue instinctif? C'est tellement arbitraire! Pour moi, un «point» absolu est une position. Un "point" relatif est un décalage.

— Sandburg

28

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/

— jAndy
source

3

Comme demandé ci-dessus, qu'est-ce qui est considéré comme le parent compensateur? Il semble que l'appel de position () sur le premier div à l'intérieur d'un autre div ne renvoie pas toujours 0,0 - même s'il n'y a pas d'autre style ou positionnement en cours.

— Kokodoko

2

jquery.offsetParent (): api.jquery.com/offsetparent "Obtenez l'élément ancêtre le plus proche positionné."

— Curtis Yallop

-6

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

— sous-traitance
source

6

Correction: le décalage et la position retournent un objet avec les propriétés gauche et haut, pas la largeur et la hauteur.

— Jorge Olivares