Internet Explorer の iFrame で z-index が PDF で機能しないのはなぜですか?

IE で iFrame 内の PDF を使用すると z-index が機能しない

Internet Explorer (IE) で z- を利用しようとすると、 PDF を含む iFrame のインデックスを使用すると、予期しない動作が発生する可能性があります。 Chrome などの他のブラウザではシームレスに動作するにもかかわらず、IE ユーザーは問題に遭遇します。

この問題を理解するには、IE の「ウィンドウ」要素と「ウィンドウレス」要素の概念を詳しく調べる必要があります。 ActiveX コントロールや選択ドロップダウンなどのウィンドウ要素は、ブラウザのメイン MSHTML プレーンの外側でレンダリングされます。対照的に、div や入力フィールドなどのウィンドウなし要素は、このプレーン内でレンダリングされます。

ウィンドウ要素とウィンドウなし要素の相互作用

重要なことに、ウィンドウ要素は常にウィンドウ要素よりも優先されます。 z インデックスに関係なく、ウィンドウのない要素。ここで、PDF を含む iFrame の問題が発生します。 IE では、PDF はウィンドウ要素として扱われます。つまり、後者の Z インデックスが高い場合でも、PDF は常にウィンドウなし要素の上に表示されます。

解決策: 別の iFrame を使用した修正

残念ながら、この問題に対する直接的な解決策はありません。ただし、PDF とページ コンテンツの間に別の iFrame を導入することで回避策を実現で​​きます。この「カバー」iFrame には負の Z インデックスがあり、ビューから隠されたままになります。 PDF のオーバーフローをブロックすることで、通常の Z-index の動作をメイン ページのコンテンツに適用できるようになり、テキストやその他の要素を 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="http://legallo1.free.fr/french/CV_JLG.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>

結論

負の Z インデックスを持つ別の iFrame を利用することで、PDF とページ コンテンツの間に効果的に障壁を作成します。この回避策により、予期された z-index 動作が可能になり、IE でテキストまたはその他の要素を PDF の上に表示できるようになります。このソリューションは理想的ではありませんが、IE の z-index の問題に対処する手段を提供します。

以上がInternet Explorer の iFrame で z-index が PDF で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。