Как выбрать опции, перекрывающие абсолютную позицию DIV?

У меня есть абсолютный позиционный 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;
}

Ответы

Ответ 1

В соответствии со спецификациями (http://docs.webplatform.org/wiki/html/elements/option)

За исключением фонового цвета и цвета, параметры стиля, применяемые к объекту стиля для элемента опции, игнорируются.

И, следовательно, свойство z-index игнорируется, а поведение по умолчанию - выпадающее над всеми элементами документа.

Ответ 2

Ни один элемент не будет применять значение z-index без атрибута position (абсолютный, относительный, фиксированный и т.д.).

Попробуйте добавить position:relative к вашему select, чтобы он наследовал значение z-index.

См. этот скринкаст для более подробного объяснения.

Ответ 3

Это работает (с использованием jquery - нужно вызвать событие mouseover):

var $select = $("select").blur();
if ($.browser.webkit) {
  $select.hide();
  setTimeout(function() {
    $select.show()
  }, 5);
}

blur, похоже, достаточно в IE7-9 и FF. Webkit не уважает это (ошибки подаются против этого), поэтому решение, похоже, быстро скрывает и показывает окно выбора.

Ответ 4

Try:

form, select, options{ z-index:10;}

Возможно, тег формы дает ему наложение. Он должен работать так же, как и у вас, поскольку IE учитывает z-index.

С уважением, -D

Ответ 5

Скрытие Выбор через script - это текущая опция