Неправильное перекрытие Div

Question

У меня возникла проблема с созданием одного div, перекрывающего остальную страницу.

Мне просто нужно одно изображение для перекрытия одного раздела. Я как-то заработал, но как только вы измените размер окна или посмотрите на него с другим разрешением, изображение не появится там, где оно должно.

Я использую position:absolute; и z-index. Он работает в некоторой степени. но он не останется в этом положении, например, если вы измените размер своего окна браузера (он перемещается от того места, где я хочу, чтобы он оставался).

this website Вот

мне нужно, чтобы перекрывать yellow box like this.

Редактировать: Просто быстрое наблюдение: я думаю, что ваше решение поставило меня в замешательство. Я не могу поставить другую div непосредственно под ним as can be seen here

Answer 1

Move

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

внутри

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

непосредственно перед изображением.

Изменение CSS к

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

и применять следующие к boxheading.png изображения

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

EDIT:

Из того, что я чувствую, вы пытаетесь достичь, вы должен смотреть на двухколоночный макет. В Интернете слишком много ресурсов для эффективной практики, чтобы узнать, как это сделать.

Чтобы добавить еще одну коробку ниже первого, вам нужно будет сделать следующие изменения в 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:

#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; 
} 

протестирована только в Chrome , Не забудьте проверить его в других браузерах!