IE7 Абсолютный элемент появляется за относительным

Question

Я знаю, что есть ошибка, когда абсолютные элементы появляются над относительными. Однако я получаю обратную сторону этого вопроса.

Z-индекс на «нижнем» элементе равен 1 и имеет позицию: назначено относительно Верхний элемент имеет абсолютное позиционирование и z-индекс 99.

Это прекрасно работает в Firefox, браузерах на основе Webkit и IE8. Любые идеи о том, почему это может происходить?

Answer 1

В Internet Explorer позиционируется элементы генерируют новую укладку контекст, начиная со значения z-index 0. Поэтому z-index не работает правильно.

См

Отчет об ошибке: ошибка z-index Explorer

и

Исправлена ​​ошибка Z-Index в Internet Explorer

Answer 2

Я нашел полезный ресурс для решения этой проблемы:

Короче говоря, если ваш абсолютно размещенный элемент пуст, IE не любит размещать его перед другими элементами (например, относительно размещенным текстом). Вы можете использовать прозрачный GIF 1x1, чтобы преодолеть это, например. установив стиль, подобный следующему, для вашего абсолютно размещенного элемента.

 .mask {
   background: transparent url('/images/clear.gif') repeat 0 0;
 }

Answer 3

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});

});

Используйте вышеупомянутое, если уже используете jQuery. Подробности здесь: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/