1

I have some page content in an iframe. I also have a drop-down menu that contains some user options. In IE (9), when I open the drop-down the menu, it appears behind the iframe. In every other browser, the behaviour as is correct (the menu appears on top of the iframe).

I have tried applying various z-index properties to these elements without success. Their common parent element is just a <body> tag.

How can I ensure that the drop-down always appears on top of the iframe in IE?

Oleksi
  • 12,947
  • 4
  • 56
  • 80
  • 1
    Similar question to http://stackoverflow.com/questions/6242034/ie-8-iframe-and-flash-object-ignores-z-index - you should find the answer there. – Andy Nov 09 '12 at 15:48
  • 1
    That question seems very specific to SWF objects. The solution involves passing wmode to the flash object, which doesn't apply to the iframe. – Oleksi Nov 09 '12 at 15:53
  • can you share a fiddle of your issue? – Kishore Nov 09 '12 at 15:55

1 Answers1

1

So one possible solution is to put an empty iframe on the screen, directly beneath the drop-down menu. You can use the z-index in this context to ensure that menu appears overtop of your empty iframe, and the whole thing will appear on top of the original iframe.

Not a very nice solution, but it works. I'm open to any suggestions on how to do this in a nicer way.

Oleksi
  • 12,947
  • 4
  • 56
  • 80