html - Positioning an image within an another? -

i have iphone-template , have screen image. want screen image position inside iphone template. tried using position property in css screen image goes top of entire web-page instead of div.

<div class="span4" id="iphone-white">     <img class="iphone-white-img" src="img/iphone-wht-front.png" alt="" />     <div id="iphoneinside">         <img class="on imgsize" id="screen1" src="img/blue.jpg" alt="" />     </div> </div> 

css:

.iphone-white-img {     max-height: 720px;     max-width: 337px;     width: 100%;     margin-top: 15px;     position: relative; }  .imgsize {     max-height: 620px;     max-width: 287px;     width: 100%;     position: absolute;     top: 0; } 

i believe #iphone-white div needs position:relative. .iphone-white-img element not parent of .imgsize, why isn't containing absolute-positioned element.