jQuery: differenza tra position () e offset ()

178

Qual è la differenza tra position()e offset()? Ho provato a fare quanto segue in un evento click:

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

E sembrano restituire esattamente lo stesso ... (L'elemento cliccato si trova all'interno di una cella di una tabella)

jquery positioning

— Svish
fonte

215

Se sono uguali dipende dal contesto.

positionrestituisce un {left: x, top: y}oggetto relativo al genitore offset
offsetrestituisce un {left: x, top: y}oggetto relativo al documento .

Ovviamente, se il documento è il genitore offset, come spesso accade, questi saranno identici. Il genitore offset è "l'elemento contenente posizionato più vicino".

Ad esempio, con questo documento:

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

Quindi lo $('#sub').offset() sarà {left: 200, top: 200}, ma lo .position()sarà {left: 0, top: 0}.

— David Hedlund
fonte

2

Quindi il genitore offset è il primo genitore con la posizione impostata su assoluto? o?

— Svish,

1

@Svish: whoa, mi è davvero mancato il rientro del codice? grazie per la modifica. sì, il genitore offset è il genitore posizionato più vicino . cioè un elemento con posizione impostata su assoluto, relativo o fisso (ma non statico). questa non è una cosa jQuery o javascript, hai lo stesso comportamento in css: se dovessi dare subun posizionamento assoluto a 0: 0, allora sarà nell'angolo in alto a sinistra del genitore offset.

— David Hedlund,

1

Cordiali saluti, .positionaggiornato in 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

Non è opposto al punto di vista istintivo? Questo è così arbitrario! Per me un "punto" assoluto è una posizione. Un "punto" relativo è un offset.

— Sandburg,

28

Il metodo .offset () ci consente di recuperare la posizione corrente di un elemento rispetto al documento . Contrastare questo con .position () , che recupera la posizione corrente relativa al genitore offset . Quando si posiziona un nuovo elemento sopra uno esistente per la manipolazione globale (in particolare, per implementare il trascinamento della selezione), .offset () è il più utile.

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

— JANDY
fonte

3

Come chiesto sopra, cosa è considerato il genitore offset? Sembra che chiamare position () sul primo div all'interno di un altro div non ritorni sempre 0,0 - anche quando non ci sono altri stili o posizionamenti in corso.

— Kokodoko,

2

jquery.offsetParent (): api.jquery.com/offsetparent "Ottieni l'elemento antenato più vicino che è posizionato."

— Curtis Yallop,

-6

Entrambe le funzioni restituiscono un oggetto semplice con due proprietà: larghezza e altezza.

offset () si riferisce alla posizione relativa al documento.

position () si riferisce alla posizione relativa al suo elemento genitore

MA quando la posizione css dell'oggetto è "assoluta" entrambe le funzioni restituiranno larghezza = 0 e altezza = 0

— dwoutsourcing
fonte

6

Correzione: offset e posizione restituiscono un oggetto con proprietà sinistra e superiore, non larghezza e altezza.

— Jorge Olivares,