これらの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クラスなどに高さを追加する必要が

.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

高さ：400px;

Answer 2

あなたの画像はabsoluteの位置にあります。つまり、DOMの流れの中でです。 したがって、この場合、overflowプロパティは適用されません。あなたはそれを使用する絶対位置を削除する必要があります。画像スタイリングから：

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

See this fiddle

Answer 3

は「絶対位置」を削除します。