[Browser, die am Test teilnehmen: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] Es scheint, dass viele Schüler verwirrt sind, warum sich diese Div auf der oberen Ebene befindet und dass Div auf der unteren Ebene ist. Sie können die Überlagerung von Schichten nach Belieben nicht verwenden. Der Überlagerungseffekt von Schichten erscheint jedoch häufig im interaktiven Design, sodass wir sie kontrollieren müssen. Lassen Sie uns zunächst einige Konzepte klarstellen, die im Artikel verwendet werden müssen : Statische Positionierung: Position: Statisch (der Standardwert der Positionseigenschaft). Dynamische Positionierung: Position: Relativ oder Position: Absolut oder Position: Fix. Ancestor -Element: Jedes Element, das dieses Element enthält. Elternelement: Das Vorfahrenelement, das das Element direkt enthält. Peer -Element: Ein Element mit einem gemeinsamen übergeordneten Element. Hinweis: Diese Konzepte werden vom Autor angepasst und nur in diesem Artikel verwendet. Zitat: Das Peer -Element ist ein sehr kritisches Wort und muss hier ausführlich erklärt werden. <div> In diesem Beispiel sind Div#A und Div#B keine "gleichzeitigen Elemente". Ende des Zitats Schauen wir uns diese fünf Regeln an : Regel 1: Wenn die Positionierungsmethode von Peer-Elementen gleich ist und es keine Z-Index-Einstellung gibt, stützt sich HTML auf letzteres. Führen Sie die Codebox aus Regel 2: Wenn die gleichen Elemente beide dynamisch positioniert sind und eine Z-Index-Einstellung vorliegt, ist der mit dem größten Z-Index-Wert die Oberseite. Führen Sie die Codebox aus Regel 3: Die Positionierungsmethoden von Peer -Elementen sind unterschiedlich, und die dynamische Positionierung hat oberste Priorität. Führen Sie die Codebox aus Regel 4: Wenn nicht simultane Elemente, und ihre Stammelemente kein dynamisches Layout haben, beruht HTML auf letzteres. Führen Sie die Codebox aus Regel 5 : [Wichtig] Wenn eines der nicht simultanen Elemente eine dynamische Positionierung hat, sucht jeder von ihnen nach den dynamischen Positionierung der Stammelemente nach oben, und jeder von ihnen nimmt das höchste Niveau an Ahnenelementen (oder sich selbst) zum Vergleich heraus . Fall 1: Egal wie groß der Z-Index des untergeordneten Elements ist, desto größer ist das übergeordnete Element. Fall 2: Das übergeordnete Element ist niedriger und das untergeordnete Element kann ebenfalls höher sein. Fall 1, Fall 2 kombiniert mit einem erweiterten Vergleich. Führen Sie die Codebox aus Zitat: Tatsächlich sind die ersten vier Punkte alle grundlegend, und nur der fünfte Punkt ist schwer zu verstehen. <div id = "ab" style = "Position: absolut;"> Vergleichen wir in diesem Beispiel die Cascade -Beziehung zwischen Div#A_INNER5 und DIV#B_INNER4. Wenn das übergeordnete Element niedriger ist und das untergeordnete Element auch höher sein kann, besteht die Verwendung von Nicht-Peer-Elementen, wenn das Vorfahrelement ein dynamisches Layout hat. Sein Vergleich hat nichts mit Position zu tun: statisch, aber sein Vorfahrelement kann verglichen werden. durch die HTML -Position. Ende des Zitats Manchmal gibt es Sonderfälle wie Flash und wählen Sie in IE6, die nicht blockiert werden können.
[Betriebssystem: Windows]
<div> </div>
<div id = "a"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div id = "f">
<div> </div>
<div id = "b"> </div>
<div id = "c"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
[Strg+A Alle Auswahltipps: Sie können zuerst einige Codes ändern]
[Strg+A Alle Auswahltipps: Sie können zuerst einige Codes ändern]
[Strg+A Alle Auswahltipps: Sie können zuerst einige Codes ändern]
[Strg+A Alle Auswahltipps: Sie können zuerst einige Codes ändern]
[Strg+A Alle Auswahltipps: Sie können zuerst einige Codes ändern]
<div id = "a" style = "Position: relativ; Z-Index: 100;">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "Position: relativ; Z-Index: 98;">
<div id = "a_inner4">
<div id = "a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id = "b_inner1">
<div id = "b_inner2">
<div id = "b_inner3" style = "Position: relativ; Z-Index: 99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
Bis zur nächsten Ebene des Ancestor -Elements Div#AB sind die Vorfahrelemente von Div#A_INNER5: Div#A, Div#A_INNER1, DIV#A_INNER2, Div#A_INNER3, Div#a_inner4; Div#B, Div#B_INNER1, DIV#B_INNER2, DIV#B_INNER3.
Analysieren Sie dann ihre angestammten Elemente, die eine dynamische Positionierung haben: Div#A_INNER5 von Ahnenelementen, die eine dynamische Positionierung enthalten, sind: Div#A, Div#A_INNER3;
Nehmen Sie dann das höchste Level zum Vergleichen heraus: Div#a>#div#b_inner3.