Укладка изображений с использованием CSS и HTML

Question

В моем коде у меня есть 5 div-боксов, выстроившихся в контейнер контейнера 900px. У меня есть фотографии внутри разделов и текст внизу. Оба изображения и текст находятся в их собственных тегах href, связанных с одним и тем же местом (потому что я хотел, чтобы текст: hover и это был единственный способ сделать это).

Для этого мне нужен значок ПРОДАЖИ изображений ONTOP и на границе (0px) границы. Значок красной продажи - 100x100px (и в самом низу, в моем примере HTML-кода). Каждый раз, когда я использую позицию: относительная или позиция: абсолютная, она подталкивала изображение и текст в div DOWN. Как я могу получить один поверх другого? Что я здесь делаю неправильно? Вот сайт прямо сейчас: http://user2cis133.achins.com/final/

Вот некоторые JSFiddle: http://jsfiddle.net/gzbvejry/

Также я прочитал shitton статей об этом и даже скопировать и вставить свой код и изменил его для этого и он по-прежнему Безразлично Не работай.

#second { 
 
    background-color: #fff; 
 
    width: 210px; 
 
    height: 390px; 
 
    float: right; 
 
    border: 1px #000 solid; 
 
    border-radius: 10px 10px 10px 10px; 
 
    margin-left: 4px; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 
a.hvr:link { 
 
    color: #696969; 
 
} 
 
a.hvr:hover { 
 
    color: #6495ED; 
 
} 
 
.brd { 
 
    position: abosolute; 
 
    margin: 5px; 
 
} 
 
#sale { 
 
    display: block; 
 
    left: 70px; 
 
    top: 0px; 
 
}

<div id="second"> 
 

 
    <a href="#"> 
 
    <img class="brd" src="images/blue prom1.jpg" width="200px" heigth="380px" /> 
 
    </a> 
 
    <a class="hvr" href="#"> 
 
Empire Waist Blue Prom Dress <br> 
 
$150 
 
</a> 
 

 
</div> 
 

 

 
<img src="images/sale.png" width="100px" height="100px"/>

Answer 1

дают position:relative в #second{} .Также проверки орфографии абсолютного в #sale, его неправильно в ссылке

#second { 
     background-color: #fff; 
     width: 210px; 
     height: 390px; 
     float: right; 
     border: 1px #000 solid; 
     border-radius: 10px 10px 10px 10px; 
     margin-left: 4px; 
     margin-top: 10px; 
     text-align: center; 
    position:relative; 
    } 
#sale { 
     position: absolute; 
     right: -49px; 
     top: -6px; 
    } 

Answer 2

<div id="second"> 
    <div class="sticker sticker-new"></div> 
     <a href="#"> 
       <img class="brd" src="http://user2cis133.achins.com/final/images/aquaprom.jpg" width="200px" heigth="380px" /> 
    </a> 
    <a class="hvr" href="#"> 
    Empire Waist Blue Prom Dress <br> 
     $150 
    </a> 

#second { 
    background-color: #fff; 
    width: 210px; 
    height: 390px; 

    border: 1px #000 solid; 
    border-radius: 10px 10px 10px 10px; 
    margin-left: 4px; 
    margin-top: 10px; 
    text-align: center; 
    } 
    a.hvr:link { 
    color: #696969; 
    } 
a.hvr:hover { 
    color: #6495ED; 
} 
.brd { 
    margin: 5px; 
} 
#sale { 
    position: relative; 
    display: block; 
    left: 70px; 
    top: 0px; 
    } 
.sticker-new { 
    background: url(http://user2cis133.achins.com/final/images/sale.png) no-repeat; 
    left: auto; 
right: 0; 
} 
    .sticker { 
    position: absolute; 
    top: 0; 
    left: 68px; 
    width:171px; 
    height:171px; 
}