Ошибка z-index в IE7, сложный случай

Question

У меня есть всплывающее окно с полями формы и динамическими подсказками.В каждом браузере подсказки отображаются нормально, но в IE6 / 7 они отображаются ниже полей формы.Классическая ошибка, но я не могу найти решение, которое работает.

Вот скриншот , Firefox 5 сверху и IE7 снизу.

Не углубляясь в кодслишком много, форма имеет следующую вложенную структуру:

div.pp (position: absolute; z-index: 200)
  -> div#le, div#ri
    -> label (position: relative)
      -> span.tip (position: absolute; z-index: 300)

Обратите внимание, что span.tip динамически генерируются и вводятся в метки, что делает их родственными элементами с входными данными.

РЕДАКТИРОВАТЬ: Вот демо .

Answer 1

Вообще говоря, в IE <8 z-индекс вашего относительно позиционированного родительского элемента должен быть выше, чем z-индекс относительно позиционированного элемента span, который вы хотите наложить. </p>

В вашем случае я бы попытался дать относительно позиционированному span z-индекс. Но без всего контекста HTML трудно сказать.

РЕДАКТИРОВАТЬ : После просмотра демонстрации я бы попробовал поставить относительно позиционированные надписи слева на z-index выше, чем справа:

.pp .le label{z-index: 10}
.pp .ri label{z-index: 5}

Answer 2

Проблема заключалась в том, что IE заново создавал z-индексы для дочерних элементов относительно позиционированных элементов, что делало невозможным установку z-индексов для разных всплывающих подсказок относительно друг друга.

Решение заключается в упрощении страницыдля IE.Я зафиксировал относительное расположение меток, абсолютно позиционировал подсказки относительно div.pp и использовал javascript для правильного позиционирования анонимных подсказок и динамического задания z-индексов.Когда z-индексы для подсказок были ниже , чем индексы для их родителей (div.pp), подсказки отображались правильно.