css - 图像叠加层不起作用

Question

我似乎无法让这个图像叠加工作，我不明白我哪里出错了。当我在标题下方设置 headerImageOverlay 时，它看起来更糟。现在，背景 Logo 看起来不错，但要叠加的图像位于正确的位置，但位于 Logo 下方而不是顶部。如有任何帮助，我们将不胜感激。

首先是 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 现在定义.container position:relative; 并移除.headerImageOverlay position:relaive;

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

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