CSS - не удается правильно применить z-index в Internet Explorer - PullRequest
0 голосов
/ 23 апреля 2010

Я написал скрипт jQuery для замены <select /> элементов на некоторые DIV и UL, которые позволяют мне моделировать исходный SELECT, но также позволяют мне стилизовать его. Пока, кроме нескольких мелких ошибок, он работает довольно хорошо.

Тем не менее, в Internet Explorer div 'options' отображается под элементами ниже div.

Вот HTML:

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li class="styledSelect-active">Test4</li>
            <li>Test1</li>
            <li>Test2</li>
         </ul>
      </div>
   </div>
</div>

<br /><br />

<div class="styledSelect-parent" style="display: inline-block; width: 59px;">
   <div class="styledSelect-newSelect" style="position: relative;">
      <input class="styledSelect-newSelect-selector" style="width: 59px;" readonly="readonly" name="hello" value="Test1" type="text">
      <div class="styledSelect-newSelect-options" style="display: none; z-index: 20; width: 59px; position: absolute; left: 0px; top: 18px;">
         <ul>
            <li class="styledSelect-active">Test1</li>
            <li>Test2</li>
            <li>Test3</li>
         </ul>
      </div>
   </div>
</div>

Если я открою первый выбор, список LI будет находиться под вторым полем выбора, а не над ним. Я не могу заставить z-индексы работать должным образом.

Чего мне не хватает? : /

РЕДАКТИРОВАТЬ: Я должен отметить, что HTML генерируется динамически из jQuery. Полный код можно найти здесь .

1 Ответ

1 голос
/ 23 апреля 2010

"В Internet Explorer позиционированные элементы создают новый контекст стека, начиная со значения z-index, равного 0. Поэтому z-index работает неправильно". http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...