Question

I can’t seem to get this image overlay to work and I don’t understand where I am going wrong. When I have the headerImageOverlay just below the header it looks worse. Right now, the background logo looks fine, but the image to overlay is in the correct position, but below the logo rather than on top. Any assistance would be appreciated.

First the 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;
}

And now the 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 now define .container position:relative; and remove .headerImageOverlay position:relaive;

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

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