Internet Explorer の iframe 内の PDF ファイルで z-index プロパティが機能しないのはなぜですか?

z-index Internet Explorer の iframe 内の PDF に関する問題

Web を閲覧すると、多くの開発者が z を使用して要素を配置するという課題に遭遇します。 -index プロパティ。特に、PDF ファイルを含む iframe を使用する場合、z-index プロパティが Internet Explorer で機能しない可能性があります。 Google Chrome などの他のブラウザでは問題が発生しない可能性がありますが、目的の視覚的配置を実現する際に障害が発生する可能性があります。

背景: Internet Explorer のウィンドウ要素とウィンドウなし要素

問題の根本を理解するには、Internet Explorer が HTML 要素をどのように分類するかを知ることが重要です。 IE は要素をウィンドウ付きとウィンドウレスの 2 つのタイプに分類します。

• ウィンドウレス要素 (div や inputs など) はブラウザによって直接レンダリングされ、z を考慮して同じ平面を占めます。 -index 値。
• ウィンドウ要素 (ActiveX コントロールや選択要素など) は、z-index に関係なく、ブラウザのメイン レンダリング エンジンの外部でレンダリングされ、ウィンドウなし要素の上に描画されます。 .

Internet Explorer での iframe の動作

当初、IE5 では iframe はウィンドウ要素とみなされていましたが、IE5.5 ではこれが変更され、ウィンドウなし要素になりました。 。ただし、下位互換性の理由から、iframe には、より低い Z インデックスを持つウィンドウ要素を描画する機能がまだあります。

問題

この問題は、iframe に次の内容が含まれている場合に発生します。 PDF (ウィンドウ要素) が Web ページ上に配置されます。 IE の iframe の独特な動作により、iframe 上に配置されたウィンドウのない要素 (通常のテキストやボタンなど) は、z-index 値に関係なく、PDF の背後に隠れます。

解決策: カバー iframe

この問題を解決するために、「カバー iframe」と呼ばれる追加の iframe が導入されています。この iframe は、PDF iframe と、その上に表示する必要があるウィンドウのない要素の間に配置されます。カバーする iframe の z-index を負の値 (-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 内の PDF ファイルで z-index プロパティが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。