title: How to solve the select overlap bug in IE6?
body: <p>When using IE, you cannot put an absolutely positioned div over a select input element. That's because the select element is considered an ActiveX object and is on top of every HTML element in the page.</p>
  
  <p>I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.</p>
  
  <p>FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.</p>
  
  <p>Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.</p>
  
  <p>Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <code>&lt;div&gt;</code> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <code>&lt;iframe&gt;</code> inside the <code>&lt;div&gt;</code> and styling it with:</p>
  
  <pre class="lang-css prettyprint-override"><code>#MyDiv iframe
  {
      position: absolute;
      z-index: -1;
      filter: mask();
      border: 0;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      width: 9999px;
      height: 9999px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>Does anyone have an even better solution than this one?</p>
  
  <p>EDIT: The purpose of this question is as much informative as it is a real question. I find the <code>&lt;iframe&gt;</code> trick to be a good solution, but I am still looking for improvement like removing this <em>ugly useless tag</em> that degrades accessibility.</p>