Warum funktioniert Z-Index nicht, wenn Elemente über einer PDF-Datei in einem Iframe im Internet Explorer positioniert werden?

z-index-Problem mit PDF im Iframe im Internet Explorer

Trotz der einfachen Verwendung von z-index zur Steuerung der Stapelreihenfolge von HTML Elemente kann es manchmal zu Problemen in bestimmten Browsern kommen. Ein solches Problem tritt im Internet Explorer auf, wenn versucht wird, ein Element über einem Iframe zu positionieren, der eine PDF-Datei enthält.

Fenster- oder fensterlose Elemente im IE

Um dieses Problem zu verstehen , ist es wichtig zu wissen, wie Internet Explorer HTML-Elemente kategorisiert. Es klassifiziert sie in zwei Typen:

• Fensterlose Elemente: Elemente wie div und input sind fensterlos, werden vom Browser in einer einzigen MSHTML-Ebene gerendert und halten sich an die Z-Index-Reihenfolge .
• Fensterelemente: Elemente wie Select- und ActiveX-Steuerelemente werden außerhalb von MSHTML gerendert und existieren in einer separaten Ebene, die über die fensterlosen Elemente gemalt wird, unabhängig vom Z-Index.

Iframe-Ausnahme im IE

Historisch gesehen waren Iframes Fensterelemente, aber das hat sich in IE 5.5 geändert. Obwohl iFrames jetzt fensterlos sind, behalten sie aus Gründen der Abwärtskompatibilität weiterhin das Verhalten des Zeichnens über Fensterelementen mit einem niedrigeren Z-Index bei.

Behebung des Z-Index-Problems

Im Im speziellen Fall einer PDF-Datei in einem Iframe wird die PDF-Datei aufgrund ihrer Fensterstruktur immer über dem regulären Seiteninhalt gerendert. Um dieses Problem zu beheben, muss ein zusätzlicher Iframe zwischen dem Seiteninhalt und dem PDF-Iframe positioniert werden. Dieser zusätzliche Iframe fungiert als „Abdeckung“ und sorgt dafür, dass fensterlose Elemente über dem PDF positioniert werden können.

Codebeispiel

Hier ist ein überarbeitetes Codebeispiel, das die Lösung demonstriert :

<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>

Fazit

Durch die Verwendung eines zusätzlichen „Cover“-Iframes ist es möglich, zu erzwingen, dass Elemente über einem PDF in einem Iframe im Internet angezeigt werden Explorer, auch wenn der Z-Index zunächst wirkungslos zu sein scheint. Diese Problemumgehung bietet eine Lösung für ein bestimmtes Internet Explorer-Verhalten und stellt sicher, dass die beabsichtigte Stapelreihenfolge beibehalten wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Z-Index nicht, wenn Elemente über einer PDF-Datei in einem Iframe im Internet Explorer positioniert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!