How to keep an absolutely positioned element directly over the position of inline one?
<p>This is a follow up question to <a href="http://stackoverflow.com/questions/2233097/how-can-i-stop-an-iframe-reloading-when-i-change-its-position-in-the-dom">http://stackoverflow.com/questions/2233097/how-can-i-stop-an-iframe-reloading-when-i-change-its-position-in-the-dom</a> if you want the background.</p>

<p>I have an inline div <code>&lt;div id="leaderboard-slot"&gt;&lt;/div&gt;</code> (with a fixed width and height) and another div ("leaderboard-loader") further down the page with the actual content for that div. </p>

<p>For various reasons (see previous thread), I am unable to simply do an appendChild or similar. </p>

<p>Instead, I'm hoping to position leaderboard-loader such that it takes up the space "reserved" by leaderboard slot. I've used some jQuery methods to do this:</p>

<pre><code>var loader = $('leaderboard-loader');
var dest = $('leaderboard-slot');
var pos = dest.getPosition();
loader.setStyle('top', pos.y + 'px');
loader.setStyle('left', pos.x + 'px');
</code></pre>

<p>which I fire on document load and resize. However, if other elements within the page cause a reflow, then the target div moves, but the loader doesn't.</p>

<p>Is there a safe way of doing this - it needs to work when I know nothing else about the page (ie I can't just make this call on any other methods that might cause a reflow, because I don't know what those are).</p>

<p>Any help would be much appreciated - thank you :)</p>
