我有一个绝对定位的 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 value.
请参阅此截屏视频以获取更深入的解释。 http://css-tricks.com/video-screencasts/40-how-z-index-works/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
