如何在其父元素中保留一个功能区？

Question

我有一个Bootstrap .hero-unit框，然后我在Github 功能区上有一个叉我，我正在这个框的左上角显示。

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

HTML：

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

父元素的CSS：

.my-unit {
  border-radius: 10px;
  border: 1px solid #cfcece;
}

功能区的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);
}

Answer 1

您的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>

你的CSS应该是

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

演示：http://jsbin.com/piqinore/2/

您是否检查了官方github页面以合并此功能区，请在

处查看

  

https://github.com/blog/273-github-ribbons