Internet Explorer (as of version 6) renders select form elements (drop downs) and some other objects like iframes above all other layers. This is awful when you want to have an div element pop-up in an HTML screen, only to have half the pop-up obscured by a drop down box.

One solution floating around (I used this article) is to use this bug against itself. Divs can’t cover selects, but iframes can. So you create an iframe to cover the elements, then put your div over the iframe. You could put the content itself in the iframe, but this can lead to headaches with script references.

Here is the code I used:

<div id="CalendarContainer" style="position: absolute; width: 200px; height: 190px; visibility:hidden;">
  <iframe id="CalendarIframe" frameborder="0" style="width: 100%; height: 100%; position: absolute; z-index: 1;">
  </iframe>
  <div id="Calendar" style="width:100%; height:100%; position:absolute; z-index:2;">
  </div>
</div>

You can then toggle the CalendarContainer and it will render in front of overlapping select elements. Firefox and other Gecko-based browsers don’t suffer from this problem, and will render the div properly without these iframe gymnastics.