title: Why does position absolute make page to overflow?
body: <p>My understanding is once an element is positioned absolute (even with a negative position value), it will completely out of the normal content flow. But why does it still make the page to overflow? When you run code snippet below, the horizontal scrollbar appears, I thought it shouldn't be there.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.relative {
    position: relative;
    background: pink;
  }
  .absolute {
    position: absolute;
    top: 0;
    right: -100px;
    width: 200px;
    height: 100px;
    background: rgba(0,0,0,.5);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="relative"&gt;
    Placeholder &lt;div class="absolute"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>