title: Strange jump when making an element "css-absolute" via jquery
body: <p>i try to "absolutize" previously relative DOM element, and everytime i try it, a strang "jump" occures, and i just don't know what i'm doing wrong or how to solve this.</p>
  
  <p>ok, the JS_fidle can be found here <a href="http://jsfiddle.net/rhqy3/3/" rel="nofollow">http://jsfiddle.net/rhqy3/3/</a></p>
  
  <p>this is the dummy HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;br&gt;&lt;br&gt;&lt;h1&gt;one&lt;/h1&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;h2&gt;two&lt;/h2&gt;
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>this is the javascript (using jquery)</p>
  
  <pre><code>jQuery.fn.absolutize = function()
  {
    return this.each(function()
    {
      var element = jQuery(this);
      if (element.css('position') == 'absolute')
      {
        return element;
      }
      alert('now a jump happens, that should not happen')
      element.css("position", "absolute");
      element.css(element.offset());
      return element;
  
    });
  }
  
  
  $(document).ready(function() {
              window.setTimeout(function(){$("h1, h2").absolutize()}, 2000)
          });
  </code></pre>
  
  <p>​
  ok, well, after two seconds, when i want to set the elements to their absolute equivalents, there is a .... jump?!? and i don't know why. i tried <code>$(element).position()</code> instead of <code>offset()</code>, didn't work out.</p>
  
  <p><em>update:</em> clarification - the h1 stays where it is, the h2 makes the jump. i tested in to google chrome latest, firefox latest on mac os x lion.</p>
  
  <p>my goal is to set elements (vie the absolutize jquery plugin) to their real (not jumping) equivalent css-absolute position, how to do it? thx, i really appreciate it, thx for your time.</p>
  
  <p><strong>update 2</strong>: heureka, i've identified the problem (still missing the solution)! the problem: the <strong>DOM is too fast</strong>. what does this script do: it gets the h1-element, says: take this out of the relative context (the normal rendering flow) and set it to "absolute", in this moment a browser reflow happens - as the H1 is no longer there, everything moves up. the jump occurs. this is so fast that we don't see it. now the jquery function goes to the h2 and says "absolute" but in this moment the h2-element has already the "new" relative positioning, the jump did already happen. that's the reason not everybody sees it, <strong>it's a racing condition</strong>. if the browser is to slow triggering the reflow, the DOM still holds the old values. ok 
  ,what to do: we have to collect the postion values of all elements (save them somewhere), then, after all postion values were collected, we update one element after the other. not quite sure how to do this in the context of a jquery plugin, but i will get to it (tonight, now back to work).</p>
  
  <p><strong>update 3</strong>: the answer below it the right answer to this issue. thx a lot. one thing that this doesn't solve (because i didn't ask for it) is the issue that the other elements, that might depend on the relative positioned elements then do some reflow dance (as the suddenly absolutized elements went missing), this little jquery plugin solves this <a href="https://gist.github.com/4051578" rel="nofollow">https://gist.github.com/4051578</a>, it's a jquery plugin called jquery.bodysnatch.js as it's purpose is "jquery plugin that replaces elements with absolute positioned clones of themselves, while hiding &amp; silencing the originals" have fun.</p>