css - 跨越图像顶部的文本

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 放置价格标签。