Have an element completly cover another

I am trying to have some element, lets call it overlayElement, completly cover another element开发者_如何学Go, lets call it originalElement. Overlay element is an iFrame, though that may not matter in this context. I need to have overlayElement exactly cover originalElement, meaning that they are exactly the same size, and anywhere the user would have seen originalElement they now see overlayElement. It also needs to scroll exactly with originalElement, so that it just naturally blends in with the page.

The one option I have found so far is to have a timer running, that every few seconds finda the position and size of originalElement, and sets the positiong of overlayElement to be absolute, and match it to those positioning guides returned by originalElement.

This has the problem that my code runs alot more frequently then it needs to, as most of the time their is no change in the positioning of originalElement. It also can lead to blocky updates.

I would prefer to find a way through HTML5, javascript, or CSS that would allow the overlayElement to automatically cover originalElement, and follow it as originalElement moves around on the page. If that is not possible are there are events that get fired whenever the positioning of an element on the page changes?

Thanks for any suggestions.

There is no way to do it "automatically". You need to read the position and dimensions of the element and transfer those properties to your iframe.

Without hooking into the code that's changing the layout, what you doing already is the best you can do.