iframe에 pdf가있는 Internet Explorer에서 z-index가 작동하지 않음

iframe에 pdf가있는 Internet Explorer에서 z-index가 작동하지 않음

---

IE8에서 pdf 파일이 포함 된 z-index작업을 할 수 없습니다 iframe. Google 크롬에서 작동합니다.

예 ( 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;
}

---

업데이트 : Matthew Wise는 특히 내 접근 방식에 문제가 있거나 추악한 해킹을 싫어하는 경우 고려해야 할 정말 영리한 대안 솔루션 을 제공합니다!

---

IE의 창 요소를 다른 요소로 덮는 방법이 있지만 마음에 들지 않을 것입니다.

배경 : 창 및 창없는 요소

레거시 IE는 요소를 창 및 창 없음의 두 가지 유형으로 분류합니다.

같은 정기적 인 요소 div와는 input있습니다 창문 . 단일 MSHTML 평면에서 브라우저 자체에 의해 렌더링되며 서로의 z 순서를 존중합니다.

MSHTML 외부에서 렌더링 된 요소는 창이 표시됩니다 . 예를 들어 select(OS에 의해 렌더링 됨) 및 ActiveX 컨트롤이 있습니다. 그들은 서로의 z 순서를 존중하지만 모든 창없는 요소 위에 그려진 별도의 MSHTML 평면을 차지합니다.

유일한 예외는 iframe. IE 5에서는 iframe창 요소였습니다. 이것은 IE 5.5에서 변경되었습니다 . 이제 창없는 요소이지만 이전 버전과의 호환성 때문에 Z- 색인이 더 낮은 창 요소 위에 계속 그려집니다.

즉, iframe창 및 창없는 요소 모두에 대해 Z- 색인을 준수합니다 . iframe창이있는 요소 위에 를 배치하면 위에있는 창없는 요소 iframe가 표시됩니다!

이게 무슨 뜻이야

PDF는 항상 일반 페이지 콘텐츠 위에 그려집니다 . IE 7까지의 요소 처럼select . 수정 사항은 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]-->

---

The workaround with the additional IFRAME does work in simple cases but I have spent a morning trying to get the overlay to respect transparency. Basically our application has modal popups whereby a full-window overlay behind the popups is rendered 'greyed out' (background colour black, opacity 0.25) to indicate to the user that the pop-ups are modal. With the workaround, the embedded PDF view never gets greyed out with the rest of the window so still looks 'active' and indeed you can still interact with the PDF viewer.

Our solution is to use Mozilla's pdf.js library: https://github.com/mozilla/pdf.js/ - embedding an IFRAME pointing at the test URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf works straight out of the box respecting z-index, transparency, the lot, no hacks required! Seems that they use their own rendering engine which generates standard HTML representing the content of the PDF.

---

I Had been trying to fix the same issue and my scenario was similar. I was trying to render a youtube Video on my page and on top of the video i wanted to place some div with some information.

But the youtube video being contained into an iframe wasn't letting me do that. Irrespective of the
z-index that i gave to the elements.

Then this post helped - https://stackoverflow.com/a/9074366/1484384

Basically its about the wmode. Check the above post to see how to work with it.

Here is some code from that post:

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

Or

//Fix z-index youtube video embedding

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

---

For those who are using jQueryUI, I came up with the following solution.

Add the following function and call it from the open event of your dialogs. If your browser is IE it will insert an iFrame into the Modal overlay or else add it to the dialog background.

// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");

// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
    setTimeout(function () {
        if (event && event.target && isIE) {
            var $dialog = $(event.target.parentElement);
            // Get the modal overlay if found.
            var $fixTarget = $dialog.next('.ui-widget-overlay');
            // Use the dialog body if there is no overlay.
            if (!$fixTarget || !$fixTarget.length)
                $fixTarget = $dialog;
            // Add as first child so it is covered by all of the other elements
            $fixTarget.prepend('<iframe class="iFrameFix" src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>');
        }
    }, 10);
}

You would then call it as follows..

.dialog({
    open: function (event, ui) {
        dialogIFrameFix(event);
    }
});

ReferenceURL : https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe