So lösen Sie das Problem, dass absolut positionierte Elemente in IE6/7 auf mysteriöse Weise verschwinden oder blockiert werden

1. Wenn die Breite der angrenzenden schwebenden Ebene der absolut positionierten Ebene nicht gleich der Breite der übergeordneten Ebene ist und der Float nicht gelöscht wird, ist die Anzeige in IE6/7 und FF konsistent.
2. Wenn die Breite der angrenzenden Floating-Ebene der absoluten Positionierungsebene nicht gleich der Breite der übergeordneten Ebene ist und der Float gelöscht wird, zeigt IE6/7 die absolute Positionierungsebene nicht an, FF jedoch schon.
3. Wenn die Breite der angrenzenden schwebenden Ebene der absoluten Positionierungsebene gleich der Breite der übergeordneten Ebene ist und die schwebende Ebene nicht gelöscht wird, zeigt IE6 die absolute Positionierungsebene nicht an, IE7/FF zeigt sie jedoch an.
4. Wenn die Breite der angrenzenden Floating-Ebene der absoluten Positionierungsebene gleich der Breite der übergeordneten Ebene ist und der Float gelöscht wird, zeigt IE6/7 die absolute Positionierungsebene nicht an, FF jedoch schon.

Die Lösung für diesen Fehler ist sehr einfach. Stellen Sie einfach sicher, dass die absolut positionierte Ebene nicht neben der schwebenden Ebene platziert wird. Es gibt auch eine noch einfachere Methode, nämlich ein leeres Div zwischen dem absolut positionierten Element und anderen Elementen einzufügen.
Werfen wir einen Blick auf das Phänomen, bei dem absolut positionierte Elemente auf mysteriöse Weise verschwinden und blockiert werden. Lassen Sie uns zunächst die verschiedenen beteiligten Positionierungsfunktionen verstehen:
1. Der Standard-Z-Indexwert eines relativ positionierten Elements ist 0.
2. Wenn zwei relative Positionierungen gleichzeitig auftreten, hat der Z-Index des späteren Codes Vorrang.
3. Das untergeordnete Element folgt dem vom übergeordneten Element festgelegten Z-Index. Wenn das untergeordnete Element die absolute Positionierung und den Z-Index festlegt, kann es das übergeordnete Element durchbrechen, um es anzuzeigen. Siehe den folgenden Code:

Code kopieren

Der Code lautet wie folgt:

Codeerklärung: Darüber liegen drei relativ positionierte Ebenen nebeneinander. Es wird eine Ebene mit absoluter Positionierung relativ zur ersten Ebene hinzugefügt. Theoretisch liegt dieses absolut positionierte Element über den drei relativ positionierten Elementen. In der Realität wird es jedoch nicht angezeigt. Auch der Versuch, den Z-Indexwert festzulegen, hat keine Wirkung.
Die Lösung für diesen Fehler im Internet besteht im Allgemeinen darin, mithilfe eines Hacks B zu einem negativen Wert zu machen und so den B-Level im IE zu reduzieren. Diese Methode erzeugt jedoch einen neuen IE-Fehler, wenn der Z-Index negativ ist. Je nach Positionierungseigenschaften kann dieser IE-Fehler vermieden werden.
Oberflächlich betrachtet bedeckt die untere Ebene die obere absolut positionierte Ebene. Tatsächlich bedeckt die untere Ebene die absolut positionierte übergeordnete Ebene. Sie müssen lediglich den Z-Index der übergeordneten Ebene größer einstellen als den der Ebene dahinter.

<<: Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS

>>: Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker

CSS-Pseudoklasse: empty makes me shine (Beispielcode)

So lösen Sie das Problem, dass absolut positionierte Elemente in IE6/7 auf mysteriöse Weise verschwinden oder blockiert werden

CSS-Pseudoklasse: empty makes me shine (Beispielcode)

Die beste Erklärung zu HTTPS

Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao

jQuery erzielt einen atmenden Karusselleffekt

TypeScript-Lernhinweise: Typeingrenzung

JavaScript-Kreisdiagrammbeispiel

Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue

Eine kurze Analyse der Übereinstimmungspriorität des Nginx-Konfigurationsspeicherorts

Gründe und Optimierungslösungen für langsames MySQL-Limit-Paging mit großen Offsets

In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt

Artikel empfehlen

js-Objekt, um einen Daten-Paging-Effekt zu erzielen

Detaillierter Vergleich von Ember.js und Vue.js

Sechsstufiger Beispielcode für eine JDBC-Verbindung (Verbindung zu MySQL)

Nginx konfiguriert denselben Domänennamen, um sowohl den http- als auch den https-Zugriff zu unterstützen

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux

Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Verkürzen Sie die Seiten-Rendering-Zeit, damit die Seite schneller läuft

Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke

Installieren und erstellen Sie eine Serverumgebung aus PHP+Apache+MySQL auf CentOS

Document Object Model (DOM) in JavaScript

Vue führt eine Überprüfung durch, ob der Benutzername verfügbar ist

Docker-Netzwerkmodus und Konfigurationsmethode

Teilen Sie 13 hervorragende Web-Wireframe-Design- und Produktionstools

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13