corner ribbon for resposive image - html

Question

I am trying to make a corner ribbon to sit over an image, on a responsive design site. I have set up a fiddle page with the code I've got so far. As you can see there, it seems to insert a top margin (the corner of the ribbon is not disappearing) and the overflow is not hidden. Any ideas why?
JSfiddle
.ribbon-holder {
overflow: hidden;
}
.ribbon {
position: relative;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 52px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>

Answer 1

use position:relative in the parent (.ribbon-holder) and absolute in the child (.ribbon)
.ribbon-holder {
overflow: hidden;
position: relative
}
.ribbon {
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>

Answer 2

How about this:
html:
<div class="ribbon-holder" >
<a href="http://www.somesite.com" ><img itemprop="image" class="imageSize" src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" /></a>
</div>
<div class="ribbon ribbon-holder">
Free Shipping!
</div>
css:
.ribbon-holder{
overflow: hidden;
}
.ribbon{
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 30px;
left: -32px;
width:145px;
}
https://jsfiddle.net/L4kojc4k/2/

Answer 3

Here are the changes i made :
.ribbon-holder{
overflow: hidden;
position: relative;// added by DamienBannerot
}
.ribbon{
position: absolute;// added by DamienBannerot
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;// added by DamienBannerot
left: -32px;// added by DamienBannerot
width:145px;
}
fiddle here : https://jsfiddle.net/L4kojc4k/4/