將圖像定位在另一個圖像內？

Question

我有一個iphone模板，我有一個屏幕圖像。我想讓屏幕圖像自己定位在iphone模板中。我嘗試在CSS中使用position屬性，但屏幕圖像轉到整個網頁的頂部而不是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; 
} 

Answer 1

我相信你的＃iphone白格必須是位置：相對的。 .iphone-white-img元素不是.imgSize的父元素，這就是它不包含絕對定位元素的原因。

Answer 2

如果你想要的圖像重疊其他圖像，您應該使用z-index的屬性。你想要在上面的那個應該有更高的z-指數。所以，如果在你的情況下imgSize是insinde iphone，添加

z-index: 1; 

它的風格，然後調整定位。而且，你不需要內部的div。

Answer 3

確保父（.iphoneInside）的位置是：相對

從Position absolute but relative to parent