z-индекс не работает в Internet Explorer с pdf в iframe

обновление:у Мэтью Уайза есть действительно умное альтернативное решение что вы должны учитывать-особенно если у вас возникли проблемы с моим подходом или не нравится уродливые хаки!

---

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

фон: оконные и безоконные элементы

Legacy IE классифицирует элементы на два типа: оконные и без окон.

обычные элементы, такие как div и input are безоконный. Они отображаются самим браузером в одной плоскости MSHTML и уважают z-порядок друг друга.

элементы, отображаемые вне MSHTML являются в окне, например, select (визуализируется ОС) и элементы управления ActiveX. Они уважают z-порядок друг друга, но занимают отдельную плоскость MSHTML, которая нарисована поверх всех окон элементы.

единственное исключение iframe. В IE 5, iframe был оконный элемент. Это было изменено в IE 5.5; теперь это элемент без окон, но по причинам обратной совместимости он все равно будет рисовать поверх оконных элементов с более низким Z-индексом

другими словами: iframe уважает z-индекс для оконных и безоконных элементов. Если вы ставите iframe над оконным элементом, любые элементы без окон, расположенные поверх элемент iframe будет видна!

что это значит

PDF всегда будет отображаться поверх обычного содержимого страницы -как select элементы были до IE 7. Исправление заключается в том, чтобы расположить другой iframe между вашим контентом и PDF.

демо

jsFiddle: http://jsfiddle.net/Jordan/gDuCE/

код

HTML:

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

​ CSS:

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

поддержка

это было проверено и должно работать в IE 7-9. Если вы чувствуете, что он появляется в DOM для других браузеров, вы можете добавить его с помощью JavaScript или обернуть его в условный комментарий IE:

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->