2010-07-08 6 views
160

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

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

Et ils semblent revenir exactement la même chose ... (L'élément cliquée est dans une cellule de table dans une table)

Répondre

194

Cela dépend de quel contexte l'élément est en position renvoie la position par rapport au parent de décalage et offset fait la même par rapport au document. Évidemment, si le document est le parent offset, ce qui est souvent le cas, ceux-ci seront identiques.

Si vous avez une mise en page comme celui-ci, cependant:

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

Puis le offset pour sous sera de 200: 200, mais son position sera de 0: 0.

+2

Donc le parent offset est le premier parent avec la position définie sur absolute? 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 absolu, relatif ou fixe (mais pas statique). ce n'est pas une chose jQuery ou même javascript, vous avez le même comportement dans css: si vous deviez donner un positionnement absolu 'sub' à 0: 0, alors ce sera dans le coin supérieur gauche du parent offset. –

+0

Génial, alors c'est totalement logique! (Pas de problème avec l'édition, hehe, je le fais tout le temps: p) – Svish

27

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

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

+3

Comme demandé ci-dessus, Qu'est-ce qui est considéré comme le parent compensateur? Il semble que l'appel de position() sur la première div à l'intérieur d'une autre div ne renvoie pas toujours 0,0 - même s'il n'y a pas d'autre style ou positionnement. – Kokodoko

+2

jquery.offsetParent(): http://api.jquery.com/offsetparent/ "Récupère l'élément ancêtre le plus proche qui est positionné." –

-7

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

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

la position() désigne la position par rapport à son élément parent

position

mais quand css de l'objet est "absolue" les deux fonctions retourne width = 0 & hauteur = 0

+5

Correction : offset et position renvoie un objet avec les propriétés left et top, et non la largeur et la hauteur. –