圖像疊加不起作用

Question

我似乎無法得到這個圖像疊加工作，我不明白我要去哪裏錯了。當我的頭部下面有headerImageOverlay時，看起來更糟。現在，背景徽標看起來很好，但要覆蓋的圖像位於正確的位置，但低於徽標而非頂部。任何援助將不勝感激。

首先，CSS：

.container { 
width: 960px; 
background-color: #FFF; 
margin: 0 auto; 
} 

.headerImageOverlay { 
float: right; 
padding: 1px; 
width: 127px; 
position: relative; 
} 

img.overlay { 
position: absolute; 
right: 0px; 
top: 0px; 
z-index: 10; 
} 

img.logo { 
z-index: 1; 
display: block; 
} 

.spanner { 
position: absolute; 
width: 100%; 
height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

而現在的HTML：

<div class="container"> 
    <div class="header"> 
    <img src="images/logo.jpg" class="logo" width="850" height="166" /> 
    </div> 
    <div class="headerImageOverlay"> 
    <span class="spanner"> 
     <img src="images/ross.jpg" class="overlay" /> 
    </span> 
    </div> 
</div> 

Answer 1

... live demo ........

HI現在定義.containerposition:relative;並刪除.headerImageOverlayposition:relaive;

.container { 
     position: relative; // add this line in your css 
    } 

.headerImageOverlay{ 
position: relative; // remove this line in your css 
}