jQuery: Różnica między pozycją () a offsetem ()

178

Jaka jest różnica między position()i offset()? Próbowałem wykonać następujące czynności w zdarzeniu kliknięcia:

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

I wydają się zwracać dokładnie to samo ... (Kliknięty element znajduje się w komórce tabeli w tabeli)

jquery positioning Svish
źródło

Odpowiedzi:

215

To, czy są takie same, zależy od kontekstu.

  • positionzwraca {left: x, top: y}obiekt względem odsuniętego rodzica

  • offsetzwraca {left: x, top: y}obiekt względem dokumentu .

Oczywiście, jeśli dokument jest rodzicem offsetowym, co często ma miejsce, będą one identyczne. Przesunięcie rodzic jest „najbliżej usytuowane elementu zawierającego”.

Na przykład w tym dokumencie:

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

Wtedy $('#sub').offset() będzie {left: 200, top: 200}, ale .position()będzie {left: 0, top: 0}.

David Hedlund
źródło
2
Więc offset rodzic jest pierwszym rodzicem z pozycją ustawioną na absolutną? lub?
Svish,
1
@Svish: whoa, czy naprawdę przegapiłem wcięcie w kodzie? thaks do edycji. tak, przesunięty element nadrzędny jest najbliższym położonym elementem nadrzędnym. to znaczy element z pozycją ustawioną na bezwzględną, względną lub stałą (ale nie statyczną). to nie jest jQuery ani nawet javascript, masz takie samo zachowanie w css: jeśli miałbyś nadać subbezwzględne pozycjonowanie 0: 0, to będzie w lewym górnym rogu nadrzędnego offsetu.
David Hedlund,
1
FYI, .positionzostał zaktualizowany w 1.12.0 => github.com/jquery/jquery/issues/1708
retrovertigo
Czy nie jest przeciwne do instynktownego punktu widzenia? To takie arbitralne! Dla mnie absolutnym „punktem” jest pozycja. Względny „punkt” jest przesunięciem.
Sandburg,
28

Metoda .offset () pozwala nam pobrać bieżącą pozycję elementu względem dokumentu . Porównaj to z .position () , która pobiera bieżącą pozycję względem rodzica przesunięcia . Podczas umieszczania nowego elementu na istniejącym do globalnej manipulacji (w szczególności do implementacji przeciągnij i upuść), bardziej przydatne jest .offset ().

Źródło: http://api.jquery.com/offset/

jAndy
źródło
3
Jak wspomniano powyżej, co uważa się za przesuniętego rodzica? Wygląda na to, że wywołanie position () na pierwszym divie wewnątrz innego diva nie zawsze zwraca 0,0 - nawet gdy nie ma innego stylu ani pozycjonowania.
Kokodoko
2
jquery.offsetParent (): api.jquery.com/offsetparent „Uzyskaj pozycję najbliższego elementu przodka”.
Curtis Yallop,
-6

Obie funkcje zwracają zwykły obiekt o dwóch właściwościach: szerokość i wysokość.

offset () odnosi się do pozycji względem dokumentu.

position () odnosi się do pozycji względem jej elementu macierzystego

ALE gdy pozycja css obiektu jest „bezwzględna”, obie funkcje zwrócą szerokość = 0 i wysokość = 0

dwourcing
źródło
6
Korekta: przesunięcie i pozycja zwraca obiekt o właściwościach lewej i górnej, a nie szerokości i wysokości.
Jorge Olivares