How to select options overlapping an absolute positioned DIV?

I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few <select> elements in the page which is placed above the tooltip element. In normal case the tooltip div will appear over the select tag. But when a user clicks on select tag and the options are shown, it overlaps the tooltip. Giving a higher z-index for select or options tag did not work.

Here is a sample code to illustrate the problem.

<body>
<h1>Select Options Overlapping Absolute Positioned DIV</h1>

<select name="some-name">
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Japan</option>
</select>

<div id="top-layer">
   <h2>Overlapping Div</h2>
</div>
</body>

CSS

select, options{ z-index:10;}

#top-layer { 
   background:#ccc; 
   color:#000; 
   border:solid 1px #666; 
   position:absolute; 
   top:45px; 
   left:70px; 
   z-index:100;
}

No element will apply the z-index value without also having a position attribute (absolute, relative, fixed, etc).

Try adding position:relative to your select so that it inherits a z-index value.

See this screencast for a more in depth explanation.

As per the specifications (http://docs.webplatform.org/wiki/html/elements/option)

Except for background-color and color, style settings applied through the style object for the option element are ignored.

And hence the z-index property is ignored and the default behavior is to show the drop down above all elements on the document.

This works (using jquery - should be called on the mouseover event):

var $select = $("select").blur();
if ($.browser.webkit) {
  $select.hide();
  setTimeout(function() {
    $select.show()
  }, 5);
}

blur seems to suffice in IE7-9 and FF. Webkit doesn't respect this (bugs are filed against this), so the solution seems to be to hide and show the select box quickly.

Try: