How to keep an absolutely positioned element directly over the position of inline one?

Question

This is a follow up question to http://stackoverflow.com/questions/2233097/how-can-i-stop-an-iframe-reloading-when-i-change-its-position-in-the-dom if you want the background.

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

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

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:

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

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.

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).

Any help would be much appreciated - thank you :)

Answer 1

If I understand your question correctly, there is no need for Javascript. Just put leaderboard-loader in front of the leaderboard-slot tag, give it position: absolute and identical width and height. If slot is a normal element, loader will float above it and cover it perfectly.

<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>

Answer 2

I'm starting to regret my answer now. Hopefully you can find something better than the absolute positioning workaround. But, in the spirit of kludgey solutions, you could call the repositioning script on a timer. sigh.

Answer 3

You could put them both in the same relative positioned, 0 margin div, with the temporary div z-indexed on top of the slow loader.

Make them both absoluely positioned in the parent, not the window, at 0:0 and the same size.

You can use opacity and fade one in as you fade the other one out, or just swap visibility:hidden and visible for the two elements when you are ready..