この画像オーバーレイが機能していないようで、どこが間違っているのかわかりません。ヘッダーの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>