如何选择与绝对定位DIV重叠的选项？
San*_*aul 17 html css positioning z-index
我有一个绝对定位的div,就像工具提示一样.鼠标悬停在它显示的元素上,然后隐藏鼠标.我<select>在页面中有很少的元素放在工具提示元素上面.在正常情况下,工具提示div将显示在选择标记上.但是,当用户单击选择标记并显示选项时,它会与工具提示重叠.为select或options标记提供更高的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;
}
如果没有属性（绝对、相对、固定等），任何元素z-index都不会应用该值。position
尝试添加position:relative到您的select以便它继承一个z-index值。