title: jQuery positions
body: <p>I have a problem I couldn't understand, please help:</p>
  
  <p>I've developed html page with images and made them draggable with jQuery UI help and I set these images position to relative and gave a left and top pixels, here is the link for the page <a href="http://ayyashsigns.com/lab/circles.html" rel="nofollow">http://ayyashsigns.com/lab/circles.html</a></p>
  
  <p>I set: </p>
  
  <ul>
  <li>b1 position: style="left: 180px; top: -334px;..."</li>
  <li>b2 position: style="left: 233px; top: -546px;..."</li>
  <li>b3 position: style="left: 422px; top: -350px;..."</li>
  <li>mainb position: style="left: 93px; top: -330px;..."</li>
  </ul>
  
  <p><strong>The problem is: when I run</strong></p>
  
  <ul>
  <li>$('span#b1').position().top I get 293</li>
  <li>$('span#b1').position().left I get 180</li>
  <li>$('span#b2').position().top I get 81</li>
  <li>$('span#b2').position().left I get 289</li>
  <li>$('span#b3').position().top I get 277</li>
  <li>$('span#b3').position().left I get 534</li>
  <li>$('span#mainb').position().top I get 297</li>
  <li>$('span#mainb').position().left I get 261</li>
  </ul>
  
  <p>Why is all this difference, I need to access the images programmatically using jQuery. Can anybody explain this to me and how to fix it to give the exact location of the images.</p>
  
  <p>Here is the link again: <a href="http://ayyashsigns.com/lab/circles.html" rel="nofollow">my page circles</a></p>
  
  <p>Thanx in advance for any help,</p>
  
  <p>Regards,</p>