Absolute positioniert Inhalt überlappende Fußzeile

Question

Ich habe folgende html ...

<div class="maincontent"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus nisi. Sed blandit, nunc eget ornare porta, lorem est cursus eros, in ultricies enim mi eget leo. Integer a odio at neque lobortis fermentum ac at purus. Vivamus faucibus nec tortor at sagittis. Nam lectus metus, scelerisque vehicula orci ac, lacinia elementum lorem. Nam efficitur mauris quis tortor efficitur, vitae viverra metus semper. Nunc id euismod purus. 

<div class="container"> 
    <div class="box1"> 
    Box 1 Content 
    </div> 
    <div class="box2"> 
    Box 2 Content 
    </div> 
    <div class="box3"> 
    Box 3 Content 
    </div> 
</div> 

</div> 

<footer> 
    This is the footer 
</footer> 

.container{position:relative;} 
.box1{position:absolute;top:0;background:red;color:white;} 
.box2{position:absolute;top:20px;background:green;color:white} 
.box3{position:absolute;top:40px;background:blue;color:white;} 

https://jsfiddle.net/25w7cxv1/

Aus irgendeinem Grund die Fußzeile nicht korrekt angezeigt wird und durch den Rest des Inhalts überlappt wird. Was mache ich falsch?

Answer 1

Indem Sie jedem .box einen position:absolute geben, nehmen Sie sie aus dem Dokumentenfluss heraus und positionieren sie dann absolut im Vergleich zu ihrem positionierten Eltern (oder Vorfahr).

<footer> ist immer noch im Dokumentfluss, und so wird direkt nach dem Text in .maincontent angezeigt.

Hier habe ich position:absolute entfernt, so dass die Boxen inline bleiben im Dokument:

.container{position:relative;} 
.box1{background:red;color:white;} 
.box2{background:green;color:white} 
.box3{background:blue;color:white;} 

Und hier habe ich die Boxen eine Eigenschaft display: table gegeben haben, so dass sie nur so breit wie ihre Inhalte sind:

.box1, .box2, .box3 {display: table;} 

Ich denke, das tut, was Sie versuchten zu erreichen.

Geige: https://jsfiddle.net/gmncpn82/