Как выбрать опции, перекрывающие абсолютно позиционированный DIV?
У меня есть абсолютно позиционированный div, который работает как всплывающая подсказка. При наведении курсора мыши на элемент он отображается, а затем скрывается при наведении курсора. У меня есть несколько элементов на странице, которые размещены над элементом всплывающей подсказки. В обычном случае всплывающая подсказка div появляется над тегом select. Но когда пользователь нажимает на тег select и отображаются варианты, он перекрывает всплывающую подсказку. Задание более высокого z-index для тега 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;
}
17
задан peterh says reinstate Monica 14 May 2017 в 18:12
поделиться
0 ответов
Другие вопросы по тегам: