Dabei entdeckte ich ein sehr einfaches Problem, auf das viele Menschen stoßen sollten: Das Festlegen des Z-INDEX-Attributs ist ungültig. In CSS kann die Ebene nur durch Code geändert werden. Dieses Attribut ist der Z-Index. Damit der Z-Index funktioniert, gibt es eine kleine Voraussetzung, dh das Positionsattribut des Elements muss relativ, absolut oder fest sein.
1. Der erste Fall (z-index funktioniert nicht, egal wie hoch er eingestellt ist):
Dafür gibt es drei Bedingungen:
1. Das Positionsattribut des übergeordneten Tags ist relativ;
2. Das Frage-Tag hat kein Positionsattribut (ausgenommen statisch);
3. Das Frage-Tag enthält ein Float-Attribut.
Beispiel: Die Z-Index-Ebene funktioniert nicht. Floating macht den Z-Index ungültig. Der Code lautet wie folgt:
1 <DIV style="POSITION: relative; Z-INDEX: 9999">
2 <IMG style="FLOAT: left" src="http://www.yuanchuang.net/uploads/allimg/131101/1A5494I0-0. jpg”>
3 </DIV>
Es gibt drei Lösungen (jede reicht aus):
1. Position ändern: relativ zur Position: absolut;
2. Fügen Sie Positionsattribute (z. B. relativ, absolut usw.) zu schwebenden Elementen hinzu.
3. Schwimmer entfernen.
2. Die zweite Situation
Unter IE6 hängt die Leistung der Hierarchie manchmal nicht vom Z-Index des untergeordneten Tags ab, sondern von der Ebene des übergeordneten Tags des ersten relativen Attributs des gesamten DOM-Baums (Knotenbaums).
Beispiel: IE7 und IE6 haben den gleichen Fehler. Der Grund ist sehr einfach. Obwohl die aktuelle Vaterebene des Divs, in dem sich das Bild befindet, sehr hoch ist (1000), ist es schade, dass der Vater des Vaters nicht nützlich ist Ein starkes Kind von 9999 hat keine Möglichkeit weiterzukommen. Tag! ,Code wird wie folgt angezeigt:
1 <DIV style="POSITION: relative">
2 <DIV style="POSITION: relativ; Z-INDEX: 1000">
3 <DIV style="POSITION: absolut; Z-INDEX: 9999"> <IMG src=" http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg”> </DIV>
4 </DIV>
5 </DIV>
Lösung: Fügen Sie eine Aktualisierung zum ersten relativen Attribut hinzu. Hohe Ebene ( Z-Index: 1), der Code lautet wie folgt:
1 <DIV style=“POSITION: relativ; Z-INDEX: 1“>
2 <DIV style=“POSITION: relativ; Z-INDEX: 1000“>
3 <DIV style=“POSITION: absolut; Z-INDEX: 9999“> <IMG src=“http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg“> </DIV>
4 </DIV>
5 </DIV>