我似乎无法让这个图像覆盖工作,我不明白我哪里出错了。当我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>