圆形按钮被裁剪，为什么z-index不起作用？

Question

我试图将一个圆形标签固定在右上角。 通过它的裁剪方式：

这里是我的html

<div class='row'> 
    <div class='product'> 
    <div class='discount'> 
     <span class='green'> 
     40% 
     </span> 
    </div> 
    <div class='product_header'> 
     10 luglio 
    </div> 
    <div class='product_inner'> 
     <img src='https://images-na.ssl-images-amazon.com/images/I/61eHXu2AgXL._SL1000_.jpg' width='300'> 
     <p>Nike Air (Women)</p> 
     <p>Size 7</p> 
     <p class='price'> 
     Price £199.99 
     </p> 
     <button>guarda offerta</button> 
     <button>Storico prezzi</button> 
    </div> 
    <div class='product_overlay'> 
     <h2>Added to basket</h2> 
     <i class='fa fa-check'></i> 
    </div> 
    </div> 
</div> 

而且这里的CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-weight: 700; 
} 

.row { 
    width: 100%; 
    -webkit-box-pack: start; 
     -ms-flex-pack: start; 
      justify-content: flex-start; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-flow: row wrap; 
     flex-flow: row wrap; 
} 

.product { 
    box-shadow: 1px 5px 15px #CCC; 
    background-color: white; 
    width: 15em; 
    height: auto; 
    padding: 2em; 
    margin: 1em; 
    overflow: hidden; 
    position: relative; 
    -webkit-box-flex: 1; 
     -ms-flex: auto; 
      flex: auto; 
} 
.product .discount { 
    position: absolute; 
    right: -10px; 
    top: -10px; 
} 
.product .discount span.green { 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
    border-radius: 100%; 
    text-align: center; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    background: #5EA226; 
    width: 3em; 
    height: 3em; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 1.2em; 
} 
.product img { 
    max-width: 100%; 
    height: auto !important; 
    text-align: center; 
} 
.product_inner { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
    -ms-flex-flow: column wrap; 
     flex-flow: column wrap; 
} 
.product_inner p { 
    color: black; 
} 
.product_inner .price { 
    color: red; 
    font-size: 2em; 
} 
.product_inner button { 
    border: 1px solid black; 
    color: #000; 
    font-size: 1em; 
    border-radius: 3px; 
    padding: 0.5em 3em; 
    margin: 1em 0 0 0; 
    background: none; 
    cursor: pointer; 
    -webkit-transition: background ease-in .25s; 
    transition: background ease-in .25s; 
} 
.product_inner button:hover { 
    background: rgba(255, 255, 255, 0.5); 
    color: green; 
} 
.product_inner button:before { 
    font-family: FontAwesome; 
    content: '\f07A'; 
    color: #000; 
    position: absolute; 
    font-size: 1.5em; 
    margin: 0 -1.5em; 
} 
.product_inner button:hover:before { 
    color: green; 
} 
.product_overlay { 
    background: rgba(255, 255, 255, 0.9); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    -webkit-transform: translateY(-500px); 
      transform: translateY(-500px); 
    opacity: 0; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-flow: column wrap; 
     flex-flow: column wrap; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
} 
.product_overlay h2 { 
    color: rgba(43, 45, 66, 0.7); 
    font-size: 1.2em; 
    margin: 1em 0; 
} 
.product_overlay i { 
    color: rgba(43, 45, 66, 0.7); 
    font-size: 1.5em; 
} 

裁剪标签是在顶紧角落里，我尝试用z-index但我不明白是什么问题...

我也有一个codepen

Answer 1

更改此：

.product{ 
    box-shadow: 1px 5px 15px #CCC; 
    background-color: white; 
    width: 15em; 
    height: auto; 
    padding: 2em; 
    margin: 1em; 
    overflow: hidden; 
    position: relative; 
    -webkit-box-flex: 1; 
    -ms-flex: auto; 
    flex: auto; 
    } 

这样：

.product{ 
    box-shadow: 1px 5px 15px #CCC; 
    background-color: white; 
    width: 15em; 
    height: auto; 
    padding: 2em; 
    margin: 1em; 
    position: relative; 
    -webkit-box-flex: 1; 
    -ms-flex: auto; 
    flex: auto; 
    }