title: How to get the left and top position of a child element of its parent
body: <p>I have a parent-child structure of div elements (parent is the div called dartboard, a child div called rotatingDiv and that then has a child called crosshair). </p>
  
  <pre><code>dartboard
       &gt; roatingDiv
              &gt; crosshair
  </code></pre>
  
  <p>The dartboard container holds a rotating container (rotaingDiv), which then holds a child element (crosshair). I would like to find the x and y positions in relation to the dartboard container. Here is what I have at present:</p>
  
  <pre><code>$('#dartboard').append( $('#rotatingDiv').append( $('#crosshair') ) );
  
          X = $('#crosshair').position().left.toFixed(1) 
          Y = $('#crosshair').position().top.toFixed(1) 
  
  console.log("x is "+X+", y is "+Y);
  </code></pre>
  
  <p>This process runs within a per-second timer, upon inspection of the x and y values, I've noticed that i'm only receiving this information in relation of the crosshair element being inside the rotatingDiv instead of being at the dartboard level (parent of parent). Does anyone know how I can do this?</p>