html - 部分 div 未显示

Question

我有两个div，一个是带有价格的贴纸，另一个是产品图片。不幸的是，价格标签的某些部分被切断了:

我想要这样的东西:

html

    <div class="col-md-10 col-xs-12">
    <div class="product-grid third">
    <div class="product limited text-center">
       <div class="tag-price-home">
          <div class="price"><span>R$</span><br>10.0</div>
       </div>
       <a href="/produto/prod-kelly-01-1">
       </a>
       <div itemscope="" itemprop="itemListElement" itemtype="http://schema.org/Product">
          <a href="/produto/prod-kelly-01-1">
             <input type="hidden" id="produto_id" value="1">
             <meta itemprop="sku" content="1">
          </a>
          <div class="product-img"><a href="/produto/prod-kelly-01-1">
             </a><a href="/produto/prod-kelly-01-1">
             <i class=""></i>
             <img src="/fotos/1508954963747_mini.png" alt="Prod Kelly 01" title="Prod Kelly 01">
             </a>
          </div>
          <!-- /.product-img -->
          <div class="product-price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
             <meta itemprop="sku" content="1">
             <meta itemprop="availability" content="http://schema.org/InStock">
             <meta itemprop="itemCondition" content="Disponível">
             <meta itemprop="price" content="10.0">
             R$ 10,00
          </div>
          <!-- /.product_price -->
          <p class="product-name" itemprop="name">Prod Kelly 01</p>
       </div>
    </div>
<div>
<div>

CSS

    product-grid.third {
        text-align: left;
        margin-top: -20px;
        margin-left: 100px;
        margin-right: -60px;
    }

    .product-grid {
        margin: 0 0px 35px;
        text-align: center;
    }

    .product-grid.third .product {
        width: 30%;
    }

    .product-grid .product {
        cursor: pointer;
        display: inline-block;
        text-align: center;
        overflow: hidden;
        width: 24%;
        margin: 20px 1px;
        vertical-align: top;
        display: inline-block;
        position: relative;
    }

    .tag-price-home {
        width: 135px;
        height: 90px;
        background-color: #f81889;
        position: absolute;
        z-index: 2;
        top: 10px;
        right: -5px;
        transform: rotate(-5deg);
        font-family: 'Chalet-Tokyo', sans-serif;
    }

    .price {
        line-height: 40px;
        font-size: 36px;
        color: white;
        margin-top: 5px;
        margin-left: 15px;
        text-align: left;
    }

    product-img {
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        overflow: hidden;
        padding-bottom: 100%;
        max-height: 296px;
        margin-bottom: 25px;
    }

我该怎么做？我尝试在子级中添加 position: absolute 和 z-index: 99!important 并在父级中添加 position:relative (参见此答案 how to position two divs above each over ) 但不起作用。

Answer 1

    .product-grid .product {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    width: 24%;
    margin: 20px 1px;
    vertical-align: top;
    display: inline-block;
    position: relative;
}

由于贴纸有“position: absolute;”, “overflow: hidden;”如果父元素没有 height 属性，它不会自动扩展父元素的高度，但它会切断所有不在元素内部的东西，就像你会 assing height: 200px;和溢出:隐藏；然后放入一个高度为 300 像素的 child 。

我已经在 jsfiddle 上试过你的代码，我删除了“溢出:隐藏；”来自上面的类，它似乎像你想要的那样工作。

这是一个链接:http://jsfiddle.net/gLojqos2/