CODEWITHSUNDEEP
html
Jaggu
Jaggu

Reputation: 6428

iframe hides content. How to solve it?

I have a iframe. The markup goes something like this:

<iframe height="350" frameborder="0" width="100%" scrolling="auto" src="someurl.php" style="z-index:100;overflow:auto;">
</iframe>

As you can see iframe's height is fixed and 350.

In someurl.php I have a slider as the 1st element that moves vertically in up direction. I tried to set z-index of the slider to 1000 but no luck, my iframe just hides the slider behind it.

How can I solve this issue?

Upvotes: 1

Views: 1211

Answers (2)

labtoy
labtoy

Reputation: 198

i'm not sure if i understand you correctly, can you maybe post a link so we can see the problem?

in any case, the z-index on a page shown in your iframe isn't affected by the z-index of the iframe itself (the iframe has its own DOM). also, z-index behaviour is sort of browser-dependent (especially if you're using IE versions earlier than 9; in such IE versions it will negatively inherit z-index, so all parent elements must be given an index as well).

is the iframe-content from a different site? if not, i'd concider javascript to populate a div in stead of using an iframe.

Upvotes: 0

Rob W
Rob W

Reputation: 348992

"In someurl.php I have a slider as the 1st element that moves vertically in up direction."

The contents of an iFrame can never exceed the boundaries of the iframe. When the scripted element inside the frame "moves up vertically" (absolutely positioned), it's not visible any more.

If the frame and parent window are hosted at the same domain, you can inject the element (from inside the frame) to the parent window, so that the element "seems to go outside" the frame.

Upvotes: 2

Related Questions