html - 响应图像的 Angular 带

Question

我正在尝试在响应式设计网站上制作一个 Angular 丝带以放置在图像上。我已经用到目前为止的代码设置了一个 fiddle 页面。如您所见，它似乎插入了一个顶部 margin(色带的 Angular 没有消失)并且 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在 parent ( .ribbon-holder ) 和 absolute在 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>