Perché sto ottenendo lo stesso valore in offset e posizione in jQuery?

Question

Ho inserito una span all'interno del tag di paragrafo, ora la parte superiore della posizione dovrebbe mostrare come 0 e l'offset dovrebbe mostrare qualche altro valore (necessario calcolare dal documento), ma sto ottenendo lo stesso valore in entrambi ...

ho sbagliato?

questo è il mio codice:

HTML:

<div></div> 
<p>paragraph<span>span</span>paragraph</p> 

Jquery:

$('span').click(function(){ 
console.log($(this).position().top,$(this).offset().top) 
}) 

CSS: 

p{ 
    color:green; 
} 

span{ 
    color:red; 
} 

div{ 
    height:100px; 
    border:2px solid blue; 
} 

jsfiddle here

Answer 1

dal docs

Procedimento .position() ci permette di recuperare la posizione attuale di un elemento relative to the offset parent.

Contrasto con .offset(), che retrieves the current position relative to the document.

Quando si posiziona un nuovo elemento vicino ad un altro e all'interno dello stesso elemento DOM contenente, .position() è il più utile.

Se parliamo poi lo scenario:

Currrently sia .position() e .offset() hanno lo stesso genitore e si otterrà la posizione di offset del documento.

Ora, se si aggiunge un attributo più nella classe css di <p>position:relative; è possibile calcolare la differenza allora.

In breve:

.offset().top otterrà la parte superiore del documento.

.position().top otterrà il massimo dal relativo genitore.(Se genitore è relativamente impostato)

trovi la differenza qui: http://jsfiddle.net/BhsrS/1/

cassa del violino: http://jsfiddle.net/BhsrS/1/

Answer 2

Impostare la proprietà position del tag p-relative:

p { 
    color: green; 
    position: relative; 
} 

http://jsfiddle.net/zPdxB/

Answer 3

jQuery: Difference between position() and offset()

referes posizione alla posizione relativa al genitore di offset che è in realtà il documento nel tuo esempio, perché il p non è un elemento posizionato, ma piuttosto in linea . Questo è il motivo per cui stai ricevendo gli stessi valori.

se il tuo elemento p ha un posizionamento assoluto o relativo, la posizione dello span sarà ora relativa all'elemento P come originariamente previsto, e quindi un valore diverso dall'offset.