Warum überlappen sich CSS-Inhalte, aber nicht die Hintergründe?

Inhalt überlappt, Hintergrund jedoch nicht

In CSS folgt die Malreihenfolge der Elemente einer bestimmten Hierarchie. Wenn ein Element ein anderes überlappt, wird der Inhalt des überlappenden Elements oben gerendert. Der Hintergrund des überlappenden Elements wird jedoch nicht beeinflusst. Stattdessen verbleibt es in seiner Ausgangsposition.

Um dieses Verhalten zu verstehen, ist es wichtig, die [W3C-Dokumentation zur Lackierreihenfolge](https://www.w3.org/TR/css-backgrounds-3) zu lesen /#der-malauftrag). Es beschreibt die folgende Reihenfolge:

1. Hintergrundfarbe des übergeordneten Elements
2. Hintergrundbild des übergeordneten Elements
3. Inhalt des untergeordneten Elements (ohne Hintergründe und Rahmen)
4. Hintergrundfarbe des untergeordneten Elements
5. Hintergrundbild des untergeordneten Elements Element
6. Rahmen des untergeordneten Elements

In Ihrem bereitgestellten Code wird der Hintergrund des „.box“-Elements in Punkt 4 gezeichnet. Der Hintergrund des „.bottom“-Elements wird auch in Punkt 4 gezeichnet. Der Inhalt des „.bottom“-Elements (der Text) wird jedoch erst in Punkt 3 des nächsten verschachtelten Elements (das hier das Wurzelelement ist) gezeichnet Fall).

Daher scheint der Inhalt des „.bottom“-Elements vor dem Hintergrund des „.box“-Elements zu stehen, da der Text nach dem Hintergrund des „.box“-Elements gezeichnet wird aber vor dem Hintergrund des „.bottom“-Elements.

Um dieses Verhalten zu ändern, könnten Sie eine niedrige Deckkraft auf das „.bottom“-Element anwenden, wodurch sein Inhalt in der Stapelreihenfolge vor dem Hintergrund und platziert wird Grenzen des „.box“-Elements.

Das obige ist der detaillierte Inhalt vonWarum überlappen sich CSS-Inhalte, aber nicht die Hintergründe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!