Internet Explorer의 iframe에서 PDF 위에 요소를 배치할 때 Z-색인이 작동하지 않는 이유는 무엇입니까?

Internet Explorer의 iframe에서 PDF에 대한 z-index 문제

Z-index를 사용하여 HTML의 스택 순서를 제어하는 ​​것이 쉬움에도 불구하고 요소의 경우 특정 브라우저에서 문제가 발생할 수 있습니다. PDF 파일이 포함된 iframe 위에 요소를 배치하려고 할 때 Internet Explorer에서 이러한 문제 중 하나가 발생합니다.

IE의 창 요소와 창 없는 요소

이 문제를 이해하려면 , Internet Explorer가 HTML 요소를 분류하는 방법을 아는 것이 중요합니다. 두 가지 유형으로 분류됩니다.

• 창 없는 요소: div 및 입력과 같은 요소는 창이 없으며 단일 MSHTML 평면에서 브라우저에 의해 렌더링되고 z-인덱스 순서를 준수합니다. .
• 창이 있는 요소: select 및 ActiveX 컨트롤과 같은 요소는 MSHTML 외부에서 렌더링되며 Z-색인에 관계없이 창이 없는 요소 위에 그려지는 별도의 평면에 존재합니다.

IE의 Iframe 예외

역사적으로 iframe은 창 요소였지만 IE 5.5에서는 이것이 변경되었습니다. 이제 창이 없지만 iframe은 이전 버전과의 호환성을 위해 더 낮은 Z-색인을 사용하여 창으로 표시된 요소 위에 그리는 동작을 계속 유지합니다.

z-색인 문제 해결

iframe에 있는 PDF의 특정 경우 PDF는 창 표시 특성으로 인해 항상 일반 페이지 콘텐츠 위에 렌더링됩니다. 이 문제를 해결하려면 페이지 콘텐츠와 PDF iframe 사이에 추가 iframe을 배치해야 합니다. 이 추가 iframe은 "표지" 역할을 하며 창 없는 요소가 PDF 위에 배치될 수 있도록 보장합니다.

코드 샘플

다음은 솔루션을 보여주는 수정된 코드 샘플입니다. :

<code class="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></code>

<code class="css">#outer {
    ...
    z-index: 2;
}

.cover {
    ...
    z-index: -1;
}

#pdf {
    ...
    z-index: 1;
}</code>

결론

추가 "표지" iframe을 활용하면 인터넷의 iframe에 있는 PDF 위에 요소가 강제로 표시되도록 할 수 있습니다. Explorer(Z-색인이 처음에는 효과가 없는 것처럼 보이더라도). 이 해결 방법은 특정 Internet Explorer 동작에 대한 솔루션을 제공하고 의도한 스택 순서가 유지되도록 보장합니다.

위 내용은 Internet Explorer의 iframe에서 PDF 위에 요소를 배치할 때 Z-색인이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!