我有一个绝对定位的div，像工具提示一样工作。在鼠标悬停的元素上显示，然后鼠标移开。我几乎没有< select>位于工具提示元素上方的页面中的元素。通常情况下，工具提示div将显示在选择标签上。但是当用户点击选择标签并显示选项时，它与工具提示重叠。为选择或选项标签提供较高的z-index不起作用。
这是一个示例代码来说明问题。
<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;
}
解决方法
根据规格(
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.