Internet Explorer의 iframe에서 Z-색인 속성이 PDF 파일에 작동하지 않는 이유는 무엇입니까?

Internet Explorer의 iframe에 있는 PDF의 z-index 문제

웹을 탐색할 때 많은 개발자는 z를 사용하여 요소 위치를 지정해야 하는 문제에 직면합니다. -인덱스 속성. 특히 PDF 파일이 포함된 iframe을 사용하는 경우 Z-색인 속성이 Internet Explorer에서 작동하지 않을 수 있습니다. Google Chrome과 같은 다른 브라우저에서는 문제가 발생하지 않을 수 있지만 원하는 시각적 배열을 달성하는 데 장애가 될 수 있습니다.

배경: Internet Explorer의 창 있는 요소와 창 없는 요소

문제의 근본 원인을 이해하려면 Internet Explorer가 HTML 요소를 분류하는 방법을 아는 것이 중요합니다. IE는 요소를 창 있는 요소와 창 없는 요소의 두 가지 유형으로 분류합니다.

• 창 없는 요소(예: div 및 입력)는 브라우저에 의해 직접 렌더링되며 z를 존중하여 동일한 평면을 차지합니다. -색인 값.
• ActiveX 컨트롤 및 선택 요소와 같은 창 요소는 브라우저의 기본 렌더링 엔진 외부에서 렌더링되며 z-색인에 관계없이 창이 없는 요소 위에 그려집니다. .

Internet Explorer의 Iframe 동작

처음에 iframe은 IE5에서 창 요소로 간주되었지만 IE5.5에서는 변경되어 창이 없는 요소가 되었습니다. . 그러나 이전 버전과의 호환성으로 인해 iframe에는 여전히 낮은 Z-인덱스를 사용하여 창 요소 위에 그릴 수 있는 기능이 있습니다.

문제

이 문제는 다음을 포함하는 iframe에서 발생합니다. PDF(창 요소)가 웹 페이지에 배치됩니다. IE에서 iframe의 고유한 동작으로 인해 iframe 위에 위치한 창 없는 요소(예: 일반 텍스트 또는 버튼)는 Z-색인 값에 관계없이 PDF 뒤에 숨겨집니다.

해결책 : Covering Iframe

이 문제를 해결하기 위해 "covering iframe"이라고 알려진 추가 iframe이 도입되었습니다. 이 iframe은 PDF iframe과 상단에 표시되어야 하는 창 없는 요소 사이에 위치합니다. 해당 iframe의 Z-인덱스를 음수 값(예: -1)으로 설정하면 효과적으로 다른 모든 요소 뒤에 배치되어 창 없는 요소가 PDF 위에 표시될 수 있습니다.

구현

이 솔루션을 구현하기 위한 HTML 코드는 다음과 같습니다.

<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="path/to/pdf.pdf" width="200" height="200"></iframe></code>

다음 CSS 사용:

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

브라우저 지원

이 솔루션은 테스트를 거쳐 Internet Explorer 7~9에서 작동하는 것으로 확인되었습니다. iframe 접근 방식이 모든 경우 또는 브라우저에 이상적이지 않을 수 있으며 대체 솔루션이 더 적합할 수 있다는 점에 유의하는 것이 중요합니다. 특정 요구 사항에 따라 다릅니다.

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