[ Jquery element can't slide over iframe ]

I'm working on a reporting site for my company. It used to have google charts but now are using highcharts with data gained from spago.

Previously, using gogole charts, I had a nice menu which slid to the right over the entire chart when you clicked a button. this was done with z-index and relative positioning and worked just fine. now, however, the new chart is displayed in an <iframe> and it's being naughty.

When I click the button, the chart avoids the sliding menu and drops down below it. z-index and relative positioning do not appear to be able to fix it. My first idea was to put the iframe inside of a div tag which had those position settings but that doesn't work either.

do any of you have any suggestions or advice?

Answer 1

iframe is the highest element possible (its actually not a element, but a window embedded within a window). Its the only element that can go over a flash object.

So; no, this is not possible with any css tricks. You could fake the effect by resizing the iframe and changing the margin-left of the wrapper element within the iframe to matchup with the slider covering the page.

Answer 2

Just put code of new chart (or iframe) in a div then add that div at end of the body after all other elements in body.

Then it will appear on top of all elements.