Warum verdecken überlappende HTML-Inhalte manchmal nicht den zugrunde liegenden Hintergrund?

Was verursacht das Problem mit überlappenden Inhalten?

Wenn sich zwei Elemente in HTML/CSS überlappen, wird der Inhalt nicht immer vom Hintergrund des überlappenden Elements abgedeckt. Dies liegt an der spezifischen Malreihenfolge, die im CSS-Rendering-Modell angegeben ist.

CSS-Malreihenfolge

Die CSS-Malreihenfolge bestimmt die Reihenfolge, in der Elemente auf einer Webseite visuell gerendert werden. Es wird durch eine Reihe von Regeln definiert, die festlegen, welche Inhaltsebenen zuerst gemalt werden. Hier ist eine vereinfachte Übersicht:

1. Hintergrund des Root-Elements: Die Hintergrundfarbe des Root-Elements () deckt die gesamte Leinwand ab.
2. Hintergründe von untergeordneten Elementen: Wenn das untergeordnete Element ein Blockelement ist (z. B.
   ), dessen Hintergrundfarbe und Bild werden auf den Hintergrund des Stammelements gemalt und decken die gesamte Breite und Höhe des Elements ab.
3. Ränder: Die Ränder des untergeordneten Elements werden auf seinen Hintergrund gemalt.
4. Textinhalt: Abschließend wird der Textinhalt des untergeordneten Elements darüber gemalt Grenzen.

Problem im bereitgestellten Beispiel

Im angegebenen Beispiel haben wir zwei Elemente:

1. .box: A
   mit rotem Hintergrund.
2. .unten: Ein weiterer
   mit grünem Hintergrund und negativem Rand, wodurch es .box überlappt.

   Gemäß der Malreihenfolge:

   1. Der weiße Hintergrund von wird zuerst gemalt und bedeckt die gesamte Seite.
   2. Als nächstes wird der rote Hintergrund von .box gemalt, und da es sich um ein Blockelement handelt, deckt er die gesamte Breite und Höhe des Elements ab.
   3. Der Der grüne Hintergrund von .bottom wird dann gemalt, aber aufgrund des negativen Randes gleitet er zwischen den Textinhalt von .box und dessen Hintergrund.
   4. Der Textinhalt beider Elemente steht an letzter Stelle gemalt werden.

   Schlussfolgerung

   Das beobachtete Verhalten ist ein Ergebnis der vordefinierten CSS-Malreihenfolge, die der Darstellung von Textinhalten Vorrang vor Hintergrundbildern oder Farben für überlappende Elemente einräumt.