如何隐藏溢出"at the top"？

Question

有没有办法隐藏div"在顶部"而不是"在底部"的溢出？

这个jsFiddle说明了我的意思。封闭的div具有overflow-y:hidden，但这会隐藏其内容的下部。我想把它的上半部分藏起来。

---

_{强制性源代码（从jsFiddle逐字逐句）：}

*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
  margin:20px auto 0;
  overflow-y:hidden;
  height:150px;
  outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top   {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
  color:white;
  text-align:center;
  padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}

<div id="centered">
  <div id="top">
    this div should be "overflowed away"
    <em>at the top!</em>
  </div>
  <div id="bottom">
    this content should show
  </div>
</div>

Answer 1

请参阅此FIDDLE，您需要将内容包装在absolute定位的div中，bottom设置为0，而父容器的位置为relative

HTML

<div id="centered">
    <div id='content'>
        <div id="top">this div should be "overflowed away" <em>at the top!</em>
        </div>
        <div id="bottom">this content should show</div>
    </div>
</div>

CSS

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#centered {
    margin:20px auto;
    overflow-y:hidden;
    height:150px;
    border:5px solid green;
    width:150px;
    position:relative;
}
#content {
    bottom:0px;
    position:absolute;
}
#top {
    min-height:120px;
    background-color:red;
    padding-top:50px;
}
#bottom {
    background-color:#555;
    padding:60px 10px 0 0;    
}
#top, #bottom {
    color:white;
    text-align:center;
}