70

This gives me the position of some element from the left edge of the main window:

$('#bar').offset().left;

If that element is situated inside some other element and I wanted the position of #bar relative to #foo (it's parent), how can I get that?

<style>
#foo { width: 200px; margin: 0 auto; }
#foo #bar { width: 50px; margin: 0 auto; }
</style>

<div id="foo">
   <span id="bar"></span>
</div>

I saw that there is a function called offsetParent() but when console logged it doesn't seem like this function has any properties called left or x. So not sure if that can be used to get what I need.

So in my example above the offset should be something around 125px from the parent's edge rather than some thousands of pixels from the main windows edge.

1
  • 3
    Get the parent's left offset and do a subtraction?
    – Pointy
    Jun 8, 2012 at 19:27

4 Answers 4

113

Use the position() method.

$('#bar').position().left;
4
  • 13
    sweet I love simple solutions.
    – user967451
    Jun 8, 2012 at 19:30
  • 1
    anyway to go beyond parent like grand parent...so i am targeting li than how do i skip ui and go for div which has ui in it Apr 7, 2014 at 1:32
  • 26
    Note that the parent should be position: relative, absolute or fixed.
    – alexmngn
    Nov 6, 2015 at 19:43
  • 6
    To clarify alexmngn's comment, .position() only works if the parent is position relative, absolute, or fixed. Niet the Dark Absol's answer doesn't have this limitation.
    – EricP
    May 7, 2016 at 3:23
45

It's simple enough: get the offset of the element and substract the offset of its parent.

var elem = $("#bar");
var offset = elem.offset().left - elem.parent().offset().left;
4
  • 1
    +1 This works well to determine position of the cursor relative to parent element, when the child element is transformed with webkit-transform matrix
    – Jakub M.
    Jun 18, 2014 at 21:25
  • 4
    For more universal solution it is better to use .offsetParent (instead of .parent ) to get closest positioned parent.
    – vatavale
    Dec 31, 2015 at 6:35
  • 2
    @krummens take a look at the comments to the accepted answer, it has limitations
    – illright
    Apr 3, 2017 at 15:01
  • 1
    This is a correct solution as works with display: flex
    – zmechanic
    Feb 23, 2018 at 18:15
22

Position within a div relative to its parent:

In my case, when scroll changed the calculated offset also changed and it shouldn't so i ended up using pure javascript which is quicker anyway...

element.get(0).offsetTop

Other variation like Left is also possible element.get(0).offsetLeft

Conclusion

element.offset().top or position() are not optimal for position relative cases.

3
  • 4
    element.get(0).offsetLeft -> Only this one worked for me! Thanks!
    – jackkorbin
    Jun 14, 2017 at 16:55
  • 2
    Thank you, that is what I was looking for.
    – Vladimir
    Dec 11, 2017 at 14:03
  • Nice solution, maybe a more detailed explaination such as what's .get(0) does would have made this perfect. I know what it does, it gets the first dom element of the jquery collection.
    – DrLightman
    Sep 13, 2022 at 9:09
3
offsetLeft = $('#bar').position().left;
offsetTop = $('#bar').position().top;
1
  • 1
    The strange thing is that if delete position:relative on the container (line 6 of the css) position() behaves the same as offset(). See this [link]jsfiddle.net/ciroxxx/ut7ord0a/1
    – Ferex
    Jan 21, 2015 at 18:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy