title: How to get offset() relative to parent in jQuery?
body: <p>This gives me the position of some element from the left edge of the main window:</p>
  
  <pre><code>$('#bar').offset().left;
  </code></pre>
  
  <p>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?</p>
  
  <pre><code>&lt;style&gt;
  #foo { width: 200px; margin: 0 auto; }
  #foo #bar { width: 50px; margin: 0 auto; }
  &lt;/style&gt;
  
  &lt;div id="foo"&gt;
     &lt;span id="bar"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I saw that there is a function called <code>offsetParent()</code> but when console logged it doesn't seem like this function has any properties called <code>left</code> or <code>x</code>. So not sure if that can be used to get what I need.</p>
  
  <p>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.</p>