0

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

1 に答える 1

3

...ライブデモ.......。

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
}
于 2012-11-02T05:40:00.480 に答える