Circular button cropped, why z-index doesn't work? - css

Question

I'm trying to have a circular tag pinned in the top right corner.
By the way it's cropped:
Here is my 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>
And here the 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;
}
The cropped tag is in the top tight corner, I try with z-index but I don't understand what is the issue...
I also have a codepen

Answer 1

change this:
.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;
}
to this:
.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;
}