Как добавить кнопку над изображением с помощью CSS?

Я новичок в CSS, так что извините, если этот вопрос просто глупый или слишком простой, но я просто не знаю, как это сделать.

Мне нужно поместить кнопку над изображением, как она должна выглядеть: enter image description here

Вы видите там синюю кнопку "Копит", это IT! Я улаживаю эту вещь уже на своем веб-сайте, но как одно изображение, поэтому мой код выглядит следующим образом:

CSS

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
}

#shop .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;

}

Мой HTML:

 <div id="shop">
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>         
  </div>

Есть ли кто-нибудь, кто может помочь мне стилизовать эту кнопку в качестве другого элемента?

Большое спасибо за чтение этого сообщения.

Ответы

Ответ 1

Если я правильно понял, я бы изменил HTML на что-то вроде этого:

<div id="shop">
    <div class="content">
        <img src="http://placehold.it/182x121"/> 
        <a href="#">Counter-Strike 1.6 Steam</a>
    </div>
</div>

Тогда я смогу использовать position:absolute и position:relative, чтобы синяя кнопка была нажата.

Я создал jsfiddle: http://jsfiddle.net/y9w99/

Ответ 2

Адаптируйте этот пример к вашему коду

HTML

<div class="img-holder">
    <img src="images/img-1.png" alt="image description"/>
    <a class="link" href=""></a>
</div>

CSS

.img-holder {position: relative;}
.img-holder .link {
    position: absolute;
    bottom: 10px; /*your button position*/
    right: 10px; /*your button position*/
}

Ответ 3

Вам нужно указать relative или absolute или fixed позиционирование в ваш контейнер (#shop) и установить его zIndex, чтобы сказать 100.

Вам также нужно указать расположение relative для ваших элементов с классом content и ниже zIndex say 97.

Выполните вышеупомянутые ваши изображения и установите для них zIndex значение 91.

И затем расположите свою кнопку выше, установив ее положение на absolute и zIndex до 95

Смотрите DEMO

HTML

<div id="shop">

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

 <div class="content"> Counter-Strike 1.6 Steam 

     <img src="http://www.openvms.org/images/samples/130x130.gif">

         <a href="#"><span class='span'><span></a>

     </div>

  </div>

CSS

#shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
    position:relative;
    z-index:100
}

#shop .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
    z-index:97

}

img{

    position:relative;
    z-index:91

}

.span{

    width:70px;
    height:40px;
    border:1px solid red;
    position:absolute;
    z-index:95;
    right:60px;
    bottom:-20px;

}

Ответ 4

Мне нравится TryingToImprove ответ. Я по существу принял его ответ и упростил его до barebones css, чтобы выполнить то же самое. Я думаю, что намного легче пожевать.

HTML:

<div class="content">
    <img src="http://placehold.it/182x121"/> 
    <a href="#">Counter-Strike 1.6 Steam</a>
</div>

CSS

.content{    
    display:inline-block;
    position:relative;
}

.content a {
    position:absolute;
    bottom:5px;
    right:5px;
}

Рабочая скрипка здесь.

Ответ 5

<div class="content"> 
  Counter-Strike 1.6 Steam 
     <img src="images/CSsteam.png">
     <a href="#">Koupit</a>
</div>

/*Use this css*/
content {
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
content a{
display:inline-block;
padding:10px;
position:absolute;
bottom:10px;
right:10px;
}