Hintergrundstil auf absolut positionierten Element in einem relativen

Question

mit einem allgemeinen CSS-Problem beim Erstellen einer Seite mit Animationen. Ich habe einen Hauptcontainer, der relativ positioniert ist, und mehr als einen Container, der absolut darin positioniert ist, um die Hintergrundstile wie die Farbe der ganzen Seite zu verändern und sie zu verschieben, um die anderen Container mit verschiedenen Farben darunter mittels Z-Index zu zeigen .

warum zeigt sich nicht die Hintergrundfarbe?

.main { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.green { 
 
    background: green; 
 
    z-index: 5; 
 
    left: 50%; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    z-index: 4; 
 
}

<div class="main"> 
 
    <div class="bg green">green</div> 
 
    <div class="bg blue">blue</div> 
 
</div>

Answer 1

Wenn Sie etwas wie absolute positionieren, wird es aus dem Dokument Strom entfernt. Dies bedeutet, dass jetzt main nichts hat, um ihm eine Höhe zu geben (da der Standard.ist), und daher ist die height: 100% der Kinder immer noch 0. Der Text ist weiterhin sichtbar, da der Standardwert overflow-yvisible ist.

Um es zu beheben, geben Sie main etwas Höhe.

body, html, .main { height: 100% } 
 
.main { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.green { 
 
    background: green; 
 
    z-index: 5; 
 
    left: 50%; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    z-index: 4; 
 
}

<div class="main"> 
 
    <div class="bg green">green</div> 
 
    <div class="bg blue">blue</div> 
 
</div>