title: Absolute position of an element on the screen using jQuery
body: <p>How do I find out the absolute position of an element on the current visible screen (viewport) using jQuery?</p>
  
  <p>I am having <code>position:relative</code>, so offset() will only give the offset within the parent.</p>
  
  <p>I have hierarchical divs, so <code>$("#me").parent().offset() + $("#me").offset()</code> doesn't help either.</p>
  
  <p>I need the position in the window, not the document, so when the document is scrolled, the value should change.</p>
  
  <p>I know I could add up all the parent offsets, but I want a cleaner solution.</p>
  
  <pre><code>var top = $("#map").offset().top + 
      $("#map").parent().offset().top + 
      $("#map").parent().parent().offset().top +
      $("#map").parent().parent().parent().offset().top;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong>Update:</strong>
  I need to get the exact gap in pixels between the top of my div and the top of the document, including padding/margins/offset?</p>
  
  <p>My code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="map_frame" class="frame" hidden="hidden"&gt;
      &lt;div id="map_wrapper"&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#map_frame{
      border:1px solid #800008;
  }
  
  #map_wrapper {
      position:relative;
      left:2%;
      top:1%;
      width:95%;
      max-height:80%;
      display:block;
  }
  
  #map {
      position:relative;
      height:100%;
      width:100%;
      display:block;
      border:3px solid #fff;
  }
  </code></pre>
  
  <p><strong>jQuery to resize the map to fill the screen*</strong></p>
  
  <pre><code>var t = $("#map").offset().top + 
      $("#map").parent().offset().top + 
      $("#map").parent().parent().offset().top + 
      $("#map").parent().parent().parent().offset().top;
  
  $("#map").height($(window).height() - t - ($(window).height() * 8 / 100));
  </code></pre>
  
  <p>Thanks...</p>