Get position/offset of element relative to a parent container?

position offset zepto
matt picture matt · Jul 24, 2012 · Viewed 254.4k times · Source

I'm used to working with jQuery. In my current project however I use zepto.js. Zepto doesn't provide a position() method like jQuery does. Zepto only comes with offset().

Any idea how I can retrieve the offset of a container relative to a parent with pure js or with Zepto?

Answer

jackwanders picture jackwanders · Jul 24, 2012

Warning: jQuery, not standard JavaScript

element.offsetLeft and element.offsetTop are the pure javascript properties for finding an element's position with respect to its offsetParent; being the nearest parent element with a position of relative or absolute

Alternatively, you can always use Zepto to get the position of an element AND its parent, and simply subtract the two:

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

This has the benefit of giving you the offset of a child relative to its parent even if the parent isn't positioned.

Related questions

Check if element is visible on screen

Possible Duplicate: jQuery - Check if element is visible after scroling I'm trying to determine if an element is visible on screen. In order to to this, I'm trying to find the element's vertical position using offsetTop, but the value …

Read More
Using jquery to get element's position relative to viewport

What's the proper way to get the position of an element on the page relative to the viewport (rather than the document). jQuery.offset function seemed promising: Get the current coordinates of the first element, or set the coordinates of …

Read More
jQuery Get top offset relative to a specific div

With jQuery, how would you find the offset position relative to a specific container? For example, you have this: <body style="padding:20px"> <div id="top-container" style="margin-top:20px"> <div id="one-level-container" style="margin-top:70px"&…

Read More