Html 如何将功能区保留在其父元素内？

我有一个Bootstrap

.hero单元

框，然后我在Github上有一个Fork me功能区，显示在这个框的左上角

通常，功能区放置在屏幕的一角，但在这种情况下，它不是。那么，如何隐藏溢出其父元素的功能区部分

HTML：

<div class="hero-unit my-unit">
  <a class="ribbon" href="#">Fork me on Github</a>
  </div>
</div>

功能区的CSS：

.ribbon {
  position:absolute;
  padding:5px 45px;
  width:128px;
  background-color:#555451;
  color:#e5e5e5;
  font-size:13px;
  font-family:sans-serif;
  text-decoration:none;
  font-weight:bold;
  -webkit-backface-visibility:hidden;
  letter-spacing: .5px;
  border:2px dotted #e5e5e5;
  box-shadow:0 0 0 3px #383733,0 0 20px -3px rgba(0,0,0,.5);
  text-shadow:0 0 0 #e5e5e5,0 0 5px rgba(0,0,0,.3);
  margin-top:10px;
  margin-left:-80px;
  -ms-transform:rotate(330deg);
  -moz-transform:rotate(330deg);
  -webkit-transform:rotate(330deg);
  transform: rotate(330deg);
}

你的HTML应该是

<div class="container">
   <div class="hero-unit my-unit">
     <a href="#"><img class="ribbon"src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
  </div>
</div>

.ribbon{
    top: 0; 
    left: 0;
    border: 0;
  }

演示：

您是否查看了正式的github页面以合并此功能区，请访问

---

但在这里，您使用的是图像而不是css。我希望有一个CSS解决方案。

.ribbon{
    top: 0; 
    left: 0;
    border: 0;
  }