I'm trying to get the offsetTop position shown in google chromes inspector when you output an element.

The exact measurement it shows for offsetTop is "2942" but when I try the following below, it shows many different numbers but none is equal to that number.

It's instead showing "924" which i'm not sure what it's relative to.

The DOM tree looks like this:

Parent DIV (absolute positioned)

Child DIV (positioned relative)

Element (positioned relative) (Showing 924 for offsetLeft instead of 2942 in inspector.

How can I get it to match the value of 2942 for offset instead of 924?

Code:

$('.draggable:not(.container, #pageBody, .boundingBox)').each(function(){
                allElmDistY.push($(this).offset().top);
                allElmDistY.push($(this).position().top);
                allElmDistY.push($(this)[0].offsetTop);

                console.log($(this)[0].offsetTop, $(this));
            })

I'm outputting the information inside the loop so I can look at it through the developer console as well as which element it's being refered to.