Why does position absolute make page to overflow?

I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.

The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.

To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.

I hope this takes away your confusion.

As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.

You can get the result you're expecting in two ways. Either make body { overflow-x: hidden; }, or change the .absolute <div> to position:fixed.

Now for the answer to your question.

why does it still make the page scrollable?

Because position:absolute is positioned relative to the nearest positioned ancestor.

And a position:absolute <div> will make an area scrollable to the right or bottom if it overflows to the right/bottom.

Check Fiddle

Conversely, position:fixed is positioned relative to the viewport. It will not overflow on any side. Fiddle

Here are some links for explaining position.

Absolute positioning: This will scroll, but is out of page flow. Is usually moved from original position.

Fixed positioning: This will NOT scroll, and is out of flow. Is usually moved from original position.

Reference

body { 
  overflow-x: hidden; 
}

.relative {
  position: relative;
  background: pink;
}
.absolute {
  position: absolute;
  top: 0;
  right: -100px;
  width: 200px;
  height: 100px;
  background: rgba(0,0,0,.5);
}

<div class="relative">
  Placeholder <div class="absolute"></div>
</div>

Hope it helps.

absolute: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
CSS-Tricks

This means that the layout of the page and the size and position of other elements won't change. The width of the page does change, as we've seen, but that's not called layout.

Page layout is the part of graphic design that deals in the arrangement of visual elements on a page. It generally involves organizational principles of composition [...]
Wikipedia

When the width changes, the composition of the elements does not change (at least, in this case), so the layout does not change. The width does change, but this is supposed to happen. If you're now asking yourself: "But why?", read the next bit.

About "why" questions: There isn't always a real why; it's the way it is, and you either use it or you sit still and question it. It isn't that much of a problem either. Elements not being able to overflow the window, that would be a problem. More about "why" questions. I'm not saying all "why" questions are bad, but if you ask if a certain feature should exist there may not be a good answer, but only a good or sufficient solution.

Solution: add overflow-x: hidden to the CSS of the body. When you add it to .relative, a different part of .absolute will be cut off as well, because .absolute has more height.

When you add overflow-x:hidden everything outside the body with full width will be invisible, and therefore it won't stretch the page.

body {
  overflow-x:hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: -100px;
  width: 200px;
  height: 100px;
  background: grey;
}

<div class="relative">
  <div class="absolute"></div>
</div>