Warum werden überlappende Elementhintergründe hinter Inhalten angezeigt?

Inhalt wird nicht vom Hintergrund des überlappenden Elements abgedeckt

Diese Diskrepanz entsteht aufgrund der unterschiedlichen Renderreihenfolge von CSS-Komponenten. Die HTML-Elemente werden in der folgenden Reihenfolge gerendert:

1. Hintergründe und Ränder der übergeordneten Elemente
2. Hintergründe und Ränder der untergeordneten Elemente
3. Inhalt der untergeordneten Elemente

Im bereitgestellten Beispiel wird auf das zweite Div ein negativer Rand oben angewendet, wodurch es das erste Div überlappt. Aufgrund der oben genannten Renderreihenfolge wird der Hintergrund des zweiten Divs jedoch unter den Inhalt des ersten Divs gezeichnet.

Zur Verdeutlichung: Die Verschachtelungsreihenfolge und das Layout der einzelnen Elemente beeinflussen die visuelle Ausgabe. Aufgrund der wahrgenommenen Bedeutung des Textes wird der Inhalt über dem Hintergrund platziert. Diese Rangfolge kann in komplexeren Szenarien beobachtet werden:

body {
  background: pink;
}

div {
  background: red;
  border: 3px solid brown;
  margin-bottom: -20px;
}

Die Renderreihenfolge für dieses Beispiel ist wie folgt:

1. Hintergrund von
2. Hintergrund und Rand des ersten
3. Inhalt des ersten
4. Hintergrund und Rand des zweiten
5. Inhalt des zweiten

   Allerdings durch Zuweisen einer Position: relativ zu Wenn wir ein Element verwenden, können wir dieses Verhalten ändern. Diese Aktion erstellt einen neuen Stapelkontext, der es uns ermöglicht, die Platzierung des Elements mithilfe des Z-Index zu steuern. Dieser Mechanismus ermöglicht es, Elemente unabhängig von der HTML-Struktur visuell in der gewünschten Reihenfolge zu positionieren.

   Es ist wichtig zu beachten, dass dieses Phänomen nicht besonders intuitiv ist. Wenn wir jedoch die CSS-Rendering-Reihenfolge verstehen, können wir diese visuellen Effekte vorhersehen und steuern.