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

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