为什么这些img不在父div中？

Question

底部的图像不会计入所有类中的overflow：hidden属性中。它们溢出并且定位非常困难，因为所有div的边界都没有跟踪图像。

<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

您需要的高度增加了。所有类如height：400px;

Answer 2

您的图片位于absolute的位置，表示它们是以外的DOM流。 所以overflow财产将不适用于这种情况。您需要删除的绝对位置使用它：

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

See this fiddle

Answer 3

删除“的立场：绝对的”从图像中的造型。