Warum werden diese IMGs im Eltern-Div nicht gezählt?

Question

Die Bilder unten werden nicht im Attribut overflow: hidden in der Klasse all gezählt. Sie überlaufen und die Positionierung ist sehr schwierig, da die Grenze des gesamten Div nicht den Bildern folgt.

<div class="all"> 
    <div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div> 
    <div class="nav"> 
     ... 
    </div> 

    <h1 class="under"><br/><br/>Image><br/></h1> 

    <table> 
     ... 
    </table> 

     <img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/> 
     <img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/> 
     <a href="http://store.steampowered.com/app/252950/"><img id="steam2" src="images/steam.png" alt="Steam"/></a> 
</div> 

CSS:

.all{ 
width:1200px; 
margin:auto; 
border:5px solid #404040; 
overflow:hidden; 
} 

#reviewI1 { 
width:500px; 
position:absolute; 
top:415px; 
left:1010px; 
border: 3px solid #fedd58; 
} 

#reviewI2 { 
width:500px; 
position:absolute; 
top:710px; 
left:1010px; 
border: 3px solid #fedd58; 
} 

#steam2 { 
width:100px; 
left:1210px; 
position:absolute; 
top:1010px; 
} 

Answer 1

Sie benötigen eine Höhe der .all Klasse hinzuzufügen z.B. Höhe: 400px;

Answer 2

Ihre Bilder sind in absolute Position, das bedeutet, sie sind aus dem DOM-Fluss. Also die overflow Eigenschaft wird in diesem Fall nicht gelten. Sie müssen absolute Position zu entfernen, es zu benutzen:

#reviewI1 { 
    width:500px; 
    top:415px; 
    border: 3px solid #fedd58; 
} 

See this fiddle

Answer 3

die "position: absolute" entfernen Styling Bilder.