Understanding the offset method's return values

Question

I have an element with id="stimulus" in an HTML document.

When I open this document in a browser and use the browser's console to investigate properties of #stimulus, this is what I see:

> $('#stimulus').offset()
< Object {top: 0, left: 0}
> $('#stimulus').css('top')
< "-155.761px"
> $('#stimulus').css('left')
< "253.087px"

How am I to interpret this? How is top within offset different from top accessed using the css method?

Answer 1

From offset() documentation, offset is from the top of the document; whereas top and left css properties are relative to the parent. Perhaps you wish to look at position() to get the offset relative to the offset parent.

Answer 2

Offset is the position within the whole page

css top will postion the element relative to it's closest positioned ancestor. That ancestor could be anywhere in the page and so offset and top do not match unless there is no positioned ancestor