Warum erscheint der Hintergrund meines überlappenden Divs hinter seinem Inhalt?

Verstehen der CSS-Malreihenfolge und überlappender Elemente

Im gegebenen Szenario beobachten wir zwei Divs mit widersprüchlichen Hintergründen, von denen eines einander überlappt. Allerdings verschiebt sich das überlappende Div aufgrund spezifischer Regeln für die CSS-Malreihenfolge zwischen dem Hintergrund und dem Inhalt des zugrunde liegenden Div.

Gemäß der CSS-Painting-Order-Dokumentation des W3C ist dies die Malreihenfolge für Nachkommen eines Elements mit einem Stapelkontext (den das überlappende Div aufgrund seines negativen Spielraums hat) lautet wie folgt:

1. Stapeln von Kontexten aus Negativ Z-Indizes: Zuerst bilden alle untergeordneten Elemente mit negativen Z-Indizes ihre eigenen Stapelkontexte und werden in absteigender Reihenfolge gezeichnet.
2. Nicht positionierte untergeordnete Elemente im Fluss: Weiter , alle einfließenden, nicht positionierten untergeordneten Elemente auf Blockebene (einschließlich des zweiten Div in diesem Fall) werden in Baumreihenfolge gezeichnet.
3. Hintergründe und Ränder von untergeordneten Elementen auf Blockebene: Innerhalb jedes untergeordneten Elements werden deren Hintergründe und Ränder gemalt. In dieser Phase wird der Hintergrund des überlappenden Divs gezeichnet.
4. Nicht positionierte Inline-Kinder im Fluss: Nach dem Malen aller untergeordneten Elemente auf Blockebene werden alle Inline-Elemente und deren Inhalte in Baumreihenfolge gezeichnet .
5. Stapelkontexte aus positiven Z-Indizes: Schließlich sind Stapelkontexte aus Elementen mit positiven Z-Indizes in aufsteigender Reihenfolge gemalt.

Implikationen für überlappende Elemente

Das spezifische Problem bei den überlappenden Divs besteht darin, dass der Hintergrund des zweiten Divs (aus Schritt 3) gemalt wird vor seinem Textinhalt (ab Schritt 4). Dadurch wird der Text zwischen dem Inhalt und dem Hintergrund des ersten Divs angezeigt.

Beheben des Problems

Um dieses Problem zu beheben, können Sie einen der folgenden Ansätze verwenden:

• Legen Sie einen positiven Z-Index für das überlappende Div fest: Dadurch wird sichergestellt, dass der Stapelkontext vorhanden ist nach dem Hintergrund des ersten Divs gemalt.
• Verwenden Sie CSS position:relative für das überlappende Div: Dadurch wird ein neuer Stapelkontext für das Div und seine Nachkommen erstellt, sodass Sie die Malreihenfolge steuern können mit Z-Index.
• Fügen Sie eine transparente Ebene über dem überlappenden Div hinzu: Dadurch wird der Textinhalt effektiv verschoben die „obere“ Ebene, wobei der Hintergrund des überlappenden Divs umgangen wird.

Das obige ist der detaillierte Inhalt vonWarum erscheint der Hintergrund meines überlappenden Divs hinter seinem Inhalt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!