Html 用于响应图像的角功能区

我正试图在一个响应性强的设计网站上制作一个角落的丝带来覆盖图片。我已经用我目前掌握的代码建立了一个小页面。如您所见，它似乎插入了一个顶部

边距

（功能区的一角没有消失），并且

溢出

没有隐藏。知道为什么吗？

。功能区夹持器{
溢出：隐藏；
}
.丝带{
位置：相对位置；
背景：黄色；
颜色：黑色；
变换：旋转（-45度）；
文本对齐：居中；
顶部：52px；
左：-32px；
宽度：145px；
}

免费送货！

在父对象（

.ribbon holder

）中使用

位置：相对

，在子对象（

.ribbon

）中使用

绝对

）

。功能区夹持器{
溢出：隐藏；
职位：相对
}
.丝带{
位置：绝对位置；
背景：黄色；
颜色：黑色；
变换：旋转（-45度）；
文本对齐：居中；
顶部：32px；
左：-32px；
宽度：145px；
}

免费送货！

这个怎么样：

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>  

---

以下是我所做的更改：

.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;
}

在这里拉小提琴：

.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;
}