Question

我正在尝试在响应式设计网站上制作一个角落色带来坐在图像上。我已经用我到目前为止的代码设置了一个小提琴页面。正如您在那里看到的那样，它似乎插入了一个顶部margin（功能区的一角并未消失），并且overflow未被隐藏。任何想法为什么？
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

在孩子的父（position:relative）和.ribbon-holder中使用absolute {/ 1}}

＆＃13;

.ribbon

＆＃13;

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

＆＃13;

Answer 2

这个怎么样：

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

以下是我所做的更改：

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

在这里摆弄：https://jsfiddle.net/L4kojc4k/4/

用于resposive图像的角落色带

3 个答案: