Как выбрать параметры, перекрывающие абсолютное позиционирование DIV? - PullRequest
Новая
       37

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

17 голосов
/ 18 ноября 2011

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

enter image description here

Вот пример кода для иллюстрации проблемы. 

<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;
}

Ответы [ 5 ]

3 голосов
/ 31 декабря 2012

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

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

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

3 голосов
/ 19 ноября 2011

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

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

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

2 голосов
/ 03 января 2013

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

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

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

0 голосов
/ 27 июля 2015

Скрытие. Сквозной выбор - текущая опция

.
0 голосов
/ 19 ноября 2011

Попробуйте: 

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

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

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

...