У меня есть абсолютный позиционный div, который работает как всплывающая подсказка. На мыши над элементом он показывает, а затем прячется за мышь. У меня мало элементов <select>
на странице, которая находится над элементом подсказки. В нормальном случае div tooltip появится над тегом select. Но когда пользователь нажимает на тег select и отображаются параметры, он перекрывает всплывающую подсказку. Предоставление более высокого значения z для индекса select или options не работает.
Вот пример кода, иллюстрирующий проблему.
<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;
}