This is about the default LMS web UI:

I have a link on the leftContent side that onlick opens a CSS overlay - that only covers the leftContent iframe on the left. The content of the overlay is basically a div that goes from width 0 to 100% onclick with an elevated z-index confined to the leftContent iframe so far.

How do make it span across the entire width of the web page?

Since it's really only this one task I'd prefer simple 'vanilla' JS without jQuery or similar libraries, if possible.

I've been playing around with iframes and the parent document but nothing really works out so far. CSS + JS have never really been my best friends either.

So any ideas are more than welcome.