Take the 2-minute tour ×

I've got a popup dialogue which is just a div that's got display:none when not in use. It works in most cases except for one scenario when another site displayed in an iframe manages to be shown on top of the div.

As the title says I've tried using z-index with no luck. It works in IE9, FF, Chrome and Safari. IE8, IE7 and IE6 all fail.

Any ideas of what could cause this or how it could be fixed would be great. I've been unable to recreate the problem on a small scale which is the reason why I'm unfortunately unable to provide sample code.

The only hunch I have is that it's related to resizing of the content inside the iframe but it's a hunch not verified.

share|improve this question
have you tried the position: relative fix to the top-most div? –  jackJoe Aug 16 '11 at 9:06
add comment

2 Answers

It's difficult to tell for sure without seeing the code, but I suspect you're seeing this IE z-index bug

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.

The solution is to position (relative) the parent element of the popup and give it a high z-index:

<div id="parent" style=" position: relative; z-index: 9999;">
  <div id="popup" style="z-index: 999;"></div>
share|improve this answer
would that explain why the elements of the document inside the iframe ovrerides the content outside the iframe? The iframe/popup integration (in main document) works with out any issues. It's only for specific content in the iframe that it fails –  Rune FS Aug 16 '11 at 12:26
add comment
up vote 0 down vote accepted

The tricvk turned out to be to place an iframe of the same size on the same coordinates under the div.

share|improve this answer
add comment

Your Answer


