title: position: absolute causes overflow on the page
body: <p>The question in a nutshell: codepen.io/anon/pen/OBRoNW when I shrink the page beyond the size of the blue rectangle + the green rectangles the ones on the bottom push the page down and the ones on the right push the page right so scrollbars appear. how do I prevent the pushing when it comes to position: absolute elements? also, If possible, how do I do the opposite and apply the pushing to the top left items?</p>
  
  <p>The question itself (this was not completely understood so I added the simpler question on the top):
  When I use position absolute, the element still takes space when it comes to the body of the page.
  for instance:</p>
  
  <pre><code>  &lt;div class="content"&gt;
      &lt;div class="decoration"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;style&gt;
  
  .content{
    height:300px;
    width:300px;
    background:blue;
    position:relative;
  }
  .decoration{
    height:10px;
    width:10px;
    background:green;
    position:absolute;
    bottom:-5px;    
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>If I resize the window to the very point where a scrollbar appears then I set the <code>.decoration</code> class to <code>bottom:0;</code> the scrollbar disappears.
  The behavior I expect is for the page to ignore position absolute elements when calculating the size of the page as they are not supposed to take up any space.
  Therefore when the window Is shrunk it should display only half of the decoration.
  Is this a bug? Is there a known solution to this? </p>
  
  <p>edit: it appears to be happening only on <code>bottom</code> and <code>right</code> positioning</p>