Question

I have placed a span inside of the paragraph tag, now the position top should show as 0 and the offset should show some other value (need to calculate from document), but i am getting the same value in both…

i am wrong?

this is my code:

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

from the docs

The .position() method allows us to retrieve the current position of an element relative to the offset parent.

Contrast this with .offset(), which retrieves the current position relative to the document.

When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

If we talk about your scenario then :

Currrently both .position() and .offset() have same parent and they will get the offset position of the document.

Now if you add one more attribute in the css class of <p> position:relative; you can find the difference then.

In short:

.offset().top will get the top from the document.

.position().top will get the top from the relative parent.(if parent is relatively set)

you can find the difference here: http://jsfiddle.net/BhsrS/1/

checkout the fiddle: http://jsfiddle.net/BhsrS/1/