Why does position absolute make page to overflow?

Question

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.

.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>

Answer 1

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.

Answer 2

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>