Помогите с html выберите замену

Question

Я ненавижу элемент управления select по умолчанию, потому что он не может быть стилизован в IE с использованием CSS. Вот почему я разработал новый элемент управления select с нуля, используя HTML + CSS + JavaScript. В последние два дня я проделал большую работу по сопоставлению CSS и HTML, но сегодня я обнаружил ошибку, которую мне очень трудно исправить.

В IE 7, когда у меня на одной и той же странице есть элементы управления буксировкой, верхний не перекрывает нижний.

См. Изображение: coolrgb dot com / files / select-help.jpg

Загрузить демонстрационную страницу (HTML + CSS + Javascript): coolrgb dot com / files / select-help.zip

Пожалуйста, помогите мне, этот элемент управления выглядит так хорошо для меня, и теперь я хочу использовать его во всех моих проектах. Эта ошибка убила мои надежды и много времени.

Спасибо.

Answer 1

Если вы дадите каждому элементу управления один и тот же z-индекс, то у вас не будет контроля над порядком размещения.

Я бы предложил изменить ваш элемент управления так, чтобы он вел себя больше как настоящий элемент SELECT: только один может быть открыт за один раз, или потеря фокуса приводит к его закрытию. Кроме того, вы можете установить высокий z-индекс, когда элемент управления имеет фокус, и более низкий, если его нет.

Еще одна вещь, на которую стоит обратить внимание: попробуйте поставить некоторые другие элементы управления, такие как радио, флажок и выбрать под вашим контролем. Вы можете обнаружить, что IE также не будет зависать над ними, даже если вы дадите им другой z-индекс (как объяснил @grawity в своем ответе). Вот почему вы обычно видите демонстрации виджетов, отображаемые поверх этих элементов, как показано здесь: http://jqueryui.com/demos/dialog/

Типичный способ исправить это - использовать iframe, но это, вероятно, заслуживает совсем другого вопроса.

Answer 2

Редактировать: После перечитывания вопроса этот ответ теперь кажется совершенно не связанным, но я все равно оставлю его здесь.

Не совсем ответ, но попытка объяснить:

В Internet Explorer теги <code><select> реализованы как простые оконные элементы управления , в то время как все остальные элементы являются элементами управления без окон (это позволяет их стилизовать). Вот почему эти теги всегда находятся сверху и не следуют правилам z-порядка. (Часть раскрывающегося меню должна иметь стиль, поэтому это элемент управления без окон, поэтому он отображается под основной частью.)

В Firefox все элементы без окон, а в IE8 они тоже должны быть.