css - 图像叠加不起作用

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

……现场演示…………

HI 现在定义.container position:relative;和删除.headerImageOverlay position:relaive;

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

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