Was ist der Unterschied zwischen position() und offset()? Ich habe versucht, die folgenden in einem Click-Ereignis zu tun:jQuery: Unterschied zwischen position() und offset()
console.info($(this).position(), $(this).offset());
Und sie scheinen zurückzukehren genau das gleiche ... (angeklickten Element in einer Tabelle in einer Tabellenzelle ist)
Das hängt davon ab, welchem Zusammenhang das Element in position gibt die Position in Bezug auf den Offset-Mutter und offset macht das gleiche relativ zum Dokument. Offensichtlich, wenn das Dokument das versetzte Elternteil ist, was oft der Fall ist, sind diese identisch.
Wenn Sie ein Layout wie diese haben jedoch:
<div style="position: absolute; top: 200; left: 200;">
<div id="sub"></div>
</div>
Dann wird die offset für Unter wird 200: 200, aber seine position 0 sein wird: 0 gewonnen.
Die .offset() Methode ermöglicht es uns, die aktuelle Position eines Elements relativ zum Dokument abrufen. Vergleichen Sie dies mit .position(), die die aktuelle Position relativ zum Offset-Parent abruft. Wenn Sie ein neues Element über ein vorhandenes Element zur globalen Bearbeitung positionieren (insbesondere zum Implementieren von Ziehen und Ablegen), ist .offset() das nützlichere.
. Quelle: http://api.jquery.com/offset/
Wie oben aufgefordert, Was ist der Offset-Elternteil? Es scheint, dass das Aufrufen von position() auf dem ersten div in einem anderen div nicht immer 0,0 zurückgibt - auch wenn kein anderes Styling oder Positionierung stattfindet. – Kokodoko
jquery.offsetParent(): http://api.jquery.com/offsetparent/ "Holen Sie das nächstgelegene Vorfahrelement, das positioniert ist." –
Beide Funktionen geben ein einfaches Objekt mit zwei Eigenschaften zurück: width & height.
Offset() bezieht sich auf die Position relativ zum Dokument.
Position(), um die Position relativ bezieht sich auf das Mutterelement
aber wenn das CSS-Position des Objekts "absolute" ist, werden beide Funktionen geben width = 0 & height = 0
Korrektur : offset und position gibt ein Objekt mit linken und oberen Eigenschaften zurück, nicht Breite und Höhe. –
Also ist das Offset-Elternteil das erste Elternteil mit der absoluten Position? oder? – Svish
@Swish: Whoa, habe ich wirklich den Code-Einzug vermisst? Thaks für die Bearbeitung. Ja, der Offset-Elternteil ist der nächste * positionierte * Elternteil. Das heißt, ein Element mit einer absoluten, relativen oder festen Position (aber nicht statisch). Das ist kein jQuery oder auch nur eine Javascript-Sache. Sie haben das gleiche Verhalten in css: Wenn Sie absolute Sub-Positionierung auf 0: 0 setzen würden, dann befindet es sich in der oberen linken Ecke des Offset-Parents. –
Super, dann macht es total Sinn! (Kein Problem mit der Bearbeitung, hehe. Ich mache es die ganze Zeit: p) – Svish