title: How to hide overflow "at the top"?
body: <p>Is there a way to hide the overflow of a div "at the top" rather than "at the bottom"?</p>
  
  <p>This <a href="http://jsfiddle.net/fK867/" rel="nofollow">jsFiddle</a> illustrates what I mean.  The enclosing <code>div</code> has <code>overflow-y:hidden</code>, but this hides the lower part of its content.  I want to hide the upper part of it.</p>
  
  <hr>
  
  <p><sub>The obligatory source code (verbatim from the jsFiddle):</sub></p>
  
  <pre><code>*{
    -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;}
  </code></pre>
  
  <p><br/></p>
  
  <pre><code>&lt;div id="centered"&gt;
    &lt;div id="top"&gt;
      this div should be "overflowed away"
      &lt;em&gt;at the top!&lt;/em&gt;
    &lt;/div&gt;
    &lt;div id="bottom"&gt;
      this content should show
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>