текст в верхней части изображения

Question

Искал все, но не смог найти ответ на мой вопрос.

Я хочу, чтобы цена была на верхней части изображения, имеющего следующий код.

кто может помочь мне с этим, пожалуйста?

HTML

<li class="span4"> 
       <div class="thumbnail cart_item" ><span class="item_price price">€ 18.50</span> 
          <img alt="" src="http://test.jpg"> 
          <div class="caption" > 

CSS

.thumbnail>img { 
display: block; 
max-width: 100%; 
margin-right: auto; 
margin-left: auto; 
} 

.price { 
color: #fff; 
font-size: 1.4em; 
background: #96c42e; 
padding: 8px 8px 10px 8px; 
    position: relative; 
display: inline-block; 
float: right; 
margin-top: -8px; 
margin-right: -10px; 
-moz-transform: rotate(8deg); 
-webkit-transform: rotate(8deg); 
-ms-transform: rotate(8deg); 
} 

Answer 1

Попробуйте добавить следующее:

.thumbnail{ 
    position:relative; 
} 

.price { 
    color: #fff; 
    font-size: 1.4em; 
    background: #96c42e; 
    padding: 8px 8px 10px 8px; 
    position: absolute; 
    display: block; 
    top:0px; 
    left:auto; 
    right:0px; 
    margin-top: -8px; 
    margin-right: -10px; 
    -moz-transform: rotate(8deg); 
    -webkit-transform: rotate(8deg); 
    -ms-transform: rotate(8deg); 
    z-index:100; 
} 

Дайте контейнер position:relative затем поместить ценник с помощью position:absolute.