Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the overlayElement perfectly covers the originalElement, meaning they must be exactly the same size. This will result in the user seeing only the overlayElement wherever they would have seen the originalElement. Additionally, the overlayElement should scroll seamlessly with the originalElement, blending naturally into the page.
One solution I have come across involves running a timer that periodically determines the position and size of the originalElement. It then sets the position of the overlayElement to be absolute and matches it to the positioning information retrieved from the originalElement. However, this approach has its drawbacks. The code runs frequently even when there are no changes in the originalElement's positioning, leading to unnecessary updates and potentially choppy transitions.
I am exploring alternatives using HTML5, JavaScript, or CSS to enable the overlayElement to automatically cover the originalElement and move along with it as the originalElement shifts on the page. If achieving this automated process proves unattainable, I am curious if there are any events triggered whenever the positioning of an element on the page changes.
Thank you in advance for any suggestions or insights you can provide.