span image在圖像上方

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的價格標籤。