jQuery: Unterschied zwischen Position () und Offset ()

178

Was ist der Unterschied zwischen position()und offset()? Ich habe versucht, in einem Klickereignis Folgendes zu tun:

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

Und sie scheinen genau dasselbe zurückzugeben ... (Das angeklickte Element befindet sich in einer Tabellenzelle in einer Tabelle)

jquery positioning Svish
quelle

Antworten:

215

Ob sie gleich sind, hängt vom Kontext ab.

  • positionGibt ein {left: x, top: y}Objekt relativ zum übergeordneten Offset zurück

  • offsetGibt ein {left: x, top: y}Objekt relativ zum Dokument zurück .

Wenn das Dokument das übergeordnete Offset-Dokument ist, was häufig der Fall ist, sind diese offensichtlich identisch. Das übergeordnete übergeordnete Element ist "das am nächsten positionierte enthaltende Element".

Zum Beispiel mit diesem Dokument:

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

Dann $('#sub').offset() wird das sein {left: 200, top: 200}, aber es .position()wird sein {left: 0, top: 0}.

David Hedlund
quelle
2
Das versetzte übergeordnete Element ist also das erste übergeordnete Element, dessen Position auf absolut gesetzt ist. oder?
Svish
1
@Svish: whoa, habe ich den Codeeinzug wirklich vermisst? Danke für die Bearbeitung. Ja, das versetzte übergeordnete Element ist das am nächsten positionierte übergeordnete Element. Das heißt, ein Element, dessen Position auf absolut, relativ oder fest (aber nicht statisch) eingestellt ist. Dies ist keine jQuery- oder gar Javascript-Sache. Sie haben das gleiche Verhalten in CSS: Wenn Sie sub0: 0 absolut positionieren, befindet es sich in der oberen linken Ecke des übergeordneten Offsets.
David Hedlund
1
Zu .positionIhrer Information , wurde aktualisiert in 1.12.0 => github.com/jquery/jquery/issues/1708
retrovertigo
Ist nicht entgegengesetzt zum instinktiven Standpunkt? Das ist so willkürlich! Für mich ist ein absoluter "Punkt" eine Position. Ein relativer "Punkt" ist ein Versatz.
Sandburg
28

Mit der Methode .offset () können wir die aktuelle Position eines Elements relativ zum Dokument abrufen . Vergleichen Sie dies mit .position () , die die aktuelle Position relativ zum übergeordneten Versatz abruft . Wenn Sie ein neues Element für die globale Manipulation (insbesondere für die Implementierung von Drag & Drop) über einem vorhandenen Element positionieren, ist .offset () am nützlichsten.

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

jAndy
quelle
3
Was wird als Offset-Elternteil betrachtet, wie oben gefragt? Es scheint, dass der Aufruf von position () auf dem ersten Div innerhalb eines anderen Div nicht immer 0,0 zurückgibt - selbst wenn kein anderes Styling oder keine andere Positionierung stattfindet.
Kokodoko
2
jquery.offsetParent (): api.jquery.com/offsetparent " Ruft das nächstgelegene Vorfahrenelement ab, das positioniert ist."
Curtis Yallop
-6

Beide Funktionen geben ein einfaches Objekt mit zwei Eigenschaften zurück: width & height.

offset () bezieht sich auf die Position relativ zum Dokument.

position () bezieht sich auf die Position relativ zu seinem übergeordneten Element

ABER wenn die CSS-Position des Objekts "absolut" ist, geben beide Funktionen width = 0 & height = 0 zurück

Dwoutsourcing
quelle
6
Korrektur: Versatz und Position geben ein Objekt mit den Eigenschaften links und oben zurück, nicht mit Breite und Höhe.
Jorge Olivares