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