Divの重複が正しくありません

Question

divをページの残りの部分と重複させることに問題があります。

1つのセクションをオーバーラップするには1つのイメージが必要です。私はちょっとしたことがありますが、ウィンドウのサイズを変更したり、別の解像度で見ると、イメージはどこに表示されません。

私はposition:absolute;とz-インデックスを使用しています。それはある程度は機能しています。その位置にとどまることはありません。たとえば、ブラウザウィンドウのサイズを変更した場合（ブラウザウィンドウが移動したい場所から移動した場合など）です。

は、ここで私はそれがyellow box like thisをオーバーラップする必要がthis website

です。

編集：ちょっと速いフォローアップ：あなたの解決策は私に少し気になると思います。私はちょうど画像の前に

<div id="box"><img src="images/boxheading.png"></div> 

の内側に直接as can be seen here

Answer 1

移動

<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div> 

の下に別のdivを配置することができません。

変更CSS

#medal { 
    position: relative; 
    top: -240px; 
    right: -80px; 
    z-index: 50; 
} 

へと boxheading.png画像

{ 
    position: relative; 
    top: -280px; 
} 

編集するには、次を適用します。私はあなたが達成しようとしている感じだからこそ

、あなた2列のレイアウトを検討する必要があります。それを行う方法を学ぶには、オンライン上の実践的なリソースが多すぎます。

最初の1以下の別のボックスを追加するには、htmlに次の変更を行う必要がありますが：

<div id="box-container"> 
    <div id="box"> 
     <div id="medal"> 
      <img src="images/star2012medal.png" width="220" height="277"> 
     </div> 
     <img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; "> 
    </div> 
    <div id="box2">testing</div> 
</div> 

次cssを追加します。

だけChromeでテストした

#box-container { 
    float: right; 
} 

#box { 
    float: left; 
    color: #333; 
    background: #fff; 
    height: 240px; 
    width: 291px; 
    display: inline; 
    border-style: solid; 
    border-color: #fff100; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    clear: both; 
} 

#box2 { 
    float: left; 
    color: #333; 
    background: #fff; 
    height: 240px; 
    width: 291px; 
    display: inline-block; 
    border-style: solid; 
    border-color: #fff100; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    clear: both; 
    margin-top: 10px; 
} 

。他のブラウザでテストすることを忘れないでください！