Artikel-ID: 177378 - Geändert am: Mittwoch, 2. Mai 2012 - Version: 1.0

INFO: Wie funktioniert das Z-Index-Attribut für HTML-Elemente

Deutsch und Englisch nebeneinanderMaschinell-übersetzte und englische Version des Artikels nebenander anzeigen
Maschinell übersetzter ArtikelHinweis: Dies ist ein maschinell übersetzter Artikel.
Retired KB ArticleDisclaimer zu nicht mehr gepflegten KB-Inhalten
SystemtippDieser Artikel bezieht sich auf ein anderes Betriebssystem als das von Ihnen verwendete. Für Sie möglicherweise nicht relevante Artikelinhalte wurden deaktiviert.

Auf dieser Seite

Alles erweitern | Alles schließen

Zusammenfassung

Es gibt viele Möglichkeiten, Elemente auf einer Webseite zu klassifizieren. Für die Zwecke dieses Artikels und der Z-Index -Attribut, können wir ihnen in zwei Kategorien unterteilen: Fenstermodus und fensterlos.

Fenstermodus Elemente

  • <OBJECT>Tagelemente</OBJECT>
  • ActiveX-Steuerelemente
  • Plug-ins
  • Dynamic HTML (DHTML) Scriptlets
  • Wählen Sie Elemente
  • IFRAMEs in Internet Explorer 5.01 und früher
Hinweis ActiveX-Steuerelemente werden als fensterloses implementiert und tatsächlich in fensterlosen Kategorie fallen. Standardmäßig Microsoft Visual Basic und Microsoft Foundation Class (MFC) Steuerelemente sind im Fenstermodus, aber Active Template Library (ATL) Steuerelemente sind fensterlos.

Fensterloses Elemente

  • Fensterlose Steuerelemente für ActiveX
  • IFRAMEs in Internet Explorer 5.5 und höher
  • Die meisten DHTML-Elemente, z. B. Hyperlinks oder Tabellen
Zum Anfang

Weitere Informationen

Alle im Fenstermodus Elemente zeichnen sich über alle fensterlose Elemente trotz Wünsche ihres Containers. Fenstermodus Elemente führen jedoch Attributs Z-Index in Bezug auf andere, Sie, wie fensterlose Elemente Attributs Z-Index mit Bezug auf folgen.

Alle fensterlose Elemente werden auf derselben Ebene MSHTML gerendert und Fenstermodus Elemente auf einer separaten MSHTML-Ebene zeichnen. Z-Index können Elemente auf derselben Ebene bearbeiten, aber nicht zu mischen, und mit Elementen in verschiedenen Ebenen entsprechen. Sie können die Z-Indizierung der Elemente auf jeder Ebene ändern, aber im Fenstermodus Flugzeug zeichnet immer am oberen Rand der fensterlosen Ebene.
Zum Anfang

Funktionsweise der Z-Index in InternetExplorer 5

Internet Explorer 5 IFRAMEs Fenstermodus Steuerelemente und befolgen Sie Attributs Z-Index in Bezug auf andere Fenster Steuerelemente wie z. B. Wählen Sie Elemente. Ist der Z-Index der IFRAME größer als die Elemente auswählen , zeichnet der IFRAME über die Elemente auswählen und umgekehrt. Wenn der Z-Index identisch ist, hat die Reihenfolge der Elemente auf der Seite Vorrang; aus diesem Grund zeichnet das letzte Element über das vorherige Element.

Der folgende Beispielcode veranschaulicht dies:
<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>
function setindex()
{
	div1.style.zIndex=text1.value;
	select1.style.zIndex=text2.value;
	getindexes();
}

function getindexes(){

	text1.value=div1.style.zIndex;
	text2.value=select1.style.zIndex;
	text3.value=5;
}
</script>
</HEAD>
<BODY onload="getindexes()">

Div
<input type="text" value="" id=text1 name=text1 ><p>

Select
<input type="text" value="" id=text2 name=text2><p>

IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1  style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:" 
size=1 >
	<option>Option1
	<option>Option2
	<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>
Die Z-Index des IFRAME wird mit einem konstanten Wert von 5 festgelegt. Wenn Sie einen Wert, der höher ist als der Rest der Elemente eingeben, zeichnet das DIV -Element immer am unteren, weil es fensterlose, und die anderen Elemente über das DIV -Element zu ziehen. Wenn Sie die Z-Index des Elements Wählen Sie einen Wert ändern, die größer als 5 ist, zeichnet die Elemente Wählen Sie oben auf den IFRAME. Wenn Sie die Z-Index des Elements Wählen Sie einen Wert, die weniger als 5 ist ändern, zeichnet es auf der Unterseite des IFRAME.

Beim Festlegen der Z-Index des Elements Wählen Sie 5 zeichnet IFRAME über das Element auswählen , da der IFRAME das letzte Element ist, und aus diesem Grund dieser Vorrang vor Wählen Sie hat. Wenn das SELECT -Element IFRAME befolgt, zeichnet das Element über den IFRAME, wenn die Z-Indizes identisch sind.
Zum Anfang

Funktionsweise der Z-Index in InternetExplorer 5.5

Z-Indizierung wird auf eine völlig neue Ebene in Internet Explorer 5.5 übernommen in welche IFRAMEs mehr Fenstermodus Elemente sind. Weitere Informationen finden Sie unter das Thema "Fensterlose IFRAME-Elemente" im folgenden Artikel der Microsoft Developer Network (MSDN):
http://msdn.Microsoft.com/en-us/library/ms649493 (v=vs.85)-aspx-#WindowlessFrames (http://msdn.microsoft.com/en-us/library/ms649493(v=vs.85).aspx#WindowlessFrames)
Dadurch bleibt das SELECT -Element als das einzige Element, das im Fenstermodus. Wenn Sie den oben stehenden Code verwenden, um die Seite in Internet Explorer 5.5 ausführen, wenn Sie die Z-Index des Elements auswählen auf einen Wert festgelegt, die größer als 5 ist, zeichnet es oben auf den IFRAME. Wenn Sie die Z-Index des Elements auswählen auf einen Wert, der kleiner als 5 ist festgelegt, überschneidet der IFRAME, obwohl sie beide fensterlose Elemente sind. Das ist was den IFRAME einzigartig macht: Es folgt die Z-Index in Bezug auf die fensterlose Elemente und Z-Index in Bezug auf Fenstermodus Elemente wie das SELECT -Element in diesem Fall unterstützt.

Beim Festlegen der Z-Index des DIV -Elements auf einen Wert, der größer als der IFRAME (z. B. 6) deckt das DIV den IFRAME. Dies unterstützt die obige Anweisung, dass IFRAMEs fensterlos sind und dass sie die Z-Reihenfolge in Bezug auf andere fensterlose Elemente folgen. Beim Festlegen der Z-Index auf einen Wert, der kleiner oder gleich der IFRAME (z. B. 5) ist immer noch zeichnet über das DIV , da die Reihenfolge der Elemente Vorrang hat. Wenn Sie die Z-Index des DIV auf 6 festgelegt und der Z-Index des Elements auswählen und IFRAME 5, zeichnet SELECT -Element immer über das DIV , da es im Fenstermodus ist.

IFRAME versucht jedoch über Wählen Sie zeichnen, da es zuletzt in der Reihenfolge angezeigt wird. Um dies zu verhindern, muss der Wert der auswählen -Element Z-Index größer ist als die des IFRAME sein oder SELECT -Element muss in der Liste, um sicherzustellen, dass das Element immer oben auf den IFRAME zeichnet, wenn die Z-Indizes gleich sind. Aus diesem Grund kann ähnliche Inhalte Z Indizierung schwierig sein. Dieses Problem, zu umgehen verwenden Sie die folgenden Methoden:
  • Verwenden Sie das Style -Attribut des cascading Stylesheets (CSS), um ein- und ausblenden Elemente bei Bedarf.
  • Verwenden Sie DHTML Scriptlets. Obwohl Verhaltensweisen in der Regel bevorzugt werden, ist dies eine Instanz, wobei Scriptlets bevorzugt werden.
  • In Internet Explorer 5.5 können Sie Popup -Objekt, das Sie Multimediainhalte über alles anzeigen können. Dies ist sehr nützlich für Menüs und Tool-Tip-Funktionalität. Weitere Informationen finden Sie im Artikel "Popup-Objekt" auf der folgenden MSDN-Website:
    http://msdn.Microsoft.com/en-us/library/ms535882 (v=vs.85) aspx (http://msdn.microsoft.com/en-us/library/ms535882(v=vs.85).aspx)
  • Verwenden Sie fensterlose ActiveX-Steuerelemente anstelle von Fenstermodus Objekte. Leider haben alle ActiveX-Steuerelementen nicht fensterlose Implementierungen.
Zum Anfang

Informationsquellen

Weitere Informationen zum Entwickeln von webbasierten Lösungen für Microsoft Internet Explorer finden Sie auf folgenden Websites von Microsoft:
http://msdn.Microsoft.com/IE/ (http://msdn.microsoft.com/ie/)

http://support.Microsoft.com/IEP (http://support.microsoft.com/iep)
Zum Anfang
Keywords: 
kbbug kbdhtml kbfaq kbieobj kbinfo kbmt KB177378 KbMtde
Zum Anfang
Maschinell übersetzter ArtikelMaschinell übersetzter Artikel
Wichtig: Dieser Artikel wurde maschinell und nicht von einem Menschen übersetzt. Die Microsoft Knowledge Base ist sehr umfangreich und ihre Inhalte werden ständig ergänzt beziehungsweise überarbeitet. Um Ihnen dennoch alle Inhalte auf Deutsch anbieten zu können, werden viele Artikel nicht von Menschen, sondern von Übersetzungsprogrammen übersetzt, die kontinuierlich optimiert werden. Doch noch sind maschinell übersetzte Texte in der Regel nicht perfekt, insbesondere hinsichtlich Grammatik und des Einsatzes von Fremdwörtern sowie Fachbegriffen. Microsoft übernimmt keine Gewähr für die sprachliche Qualität oder die technische Richtigkeit der Übersetzungen und ist nicht für Probleme haftbar, die direkt oder indirekt durch Übersetzungsfehler oder die Verwendung der übersetzten Inhalte durch Kunden entstehen könnten.
Den englischen Originalartikel können Sie über folgenden Link abrufen: 177378  (http://support.microsoft.com/kb/177378/en-us/ )
Zum Anfang
Microsoft stellt Ihnen die in der Knowledge Base angebotenen Artikel und Informationen als Service-Leistung zur Verfügung. Microsoft übernimmt keinerlei Gewährleistung dafür, dass die angebotenen Artikel und Informationen auch in Ihrer Einsatzumgebung die erwünschten Ergebnisse erzielen. Die Entscheidung darüber, ob und in welcher Form Sie die angebotenen Artikel und Informationen nutzen, liegt daher allein bei Ihnen. Mit Ausnahme der gesetzlichen Haftung für Vorsatz ist jede Haftung von Microsoft im Zusammenhang mit Ihrer Nutzung dieser Artikel oder Informationen ausgeschlossen.
Retired KB ArticleDisclaimer zu nicht mehr gepflegten KB-Inhalten
Dieser Artikel wurde für Produkte verfasst, für die Microsoft keinen Support mehr anbietet. Der Artikel wird deshalb in der vorliegenden Form bereitgestellt und nicht mehr weiter aktualisiert.
Zum Anfang