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

Я не могу сделать z-index работы на iframe который содержит pdf-файл с IE8. Он работает с Google Chrome.

пример (JSFiddle):

HTML-код

<div id="div-text">
      <div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
    <iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>

в CSS

#div-text{
    position:relative;
    left:210px;
    top:20px
}

#shouldBeOnTop{
    position:relative;
    right:60px;
    background-color:red;
    width:100px;
    z-index:2;
}

#div-frame{
    position:relative;
     z-index:1;
}

3 ответов


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


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

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

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

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

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

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

другими словами: iframe уважает z-индекс для оконных и безоконных элементов. Если iframe над оконным элементом, любые элементы без окон, расположенные над the 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]-->

Я пытался исправить ту же проблему, и мой сценарий был похож. Я пытался отобразить Видео youtube на своей странице, и поверх видео я хотел разместить некоторые div С некоторой информацией.

но видео youtube содержится в iframe не позволял мне этого делать. Независимо от
z-index что я дал элементами.

тогда этот пост помог - https://stackoverflow.com/a/9074366/1484384

в основном это о wmode. Проверьте выше сообщение, чтобы увидеть, как работать с ним.

вот код из этого поста:

<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">

или

//Fix z-index YouTube видео встраивание

$(document).ready(function (){
  $('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
  });
});

обходной путь с дополнительным IFRAME работает в простых случаях, но я провел утро, пытаясь заставить наложение уважать прозрачность. В основном наше приложение имеет модальные всплывающие окна, в которых наложение полного окна за всплывающими окнами отображается "серым цветом" (Цвет фона черный, непрозрачность 0,25), чтобы указать пользователю, что всплывающие окна являются модальными. С обходным путем встроенное представление PDF никогда не становится серым с остальной частью окна, поэтому все еще выглядит "активным" , и действительно Вы все еще может взаимодействовать с PDF viewer.

наше решение - использовать pdf Mozilla.библиотека js:https://github.com/mozilla/pdf.js/ - встраивание IFRAME, указывающего на тестовый URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf работает прямо из коробки, уважая z-индекс, прозрачность, много, никаких хаков не требуется! Кажется, что они используют свой собственный движок рендеринга, который генерирует стандартный HTML, представляющий содержание PDF.