Why Does Position Absolute Make Page To Overflow?

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

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

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

Answer : 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;
}

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

Solution 3:

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);
}

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

Hope it helps.

Solution 4:

I have read through the CSS 2.1 Docs (CSS3 did not change the visual formatting sections), and this is as explicit as I could find.

Section 2.3.1

For all media, the term canvas describes "the space where the formatting structure is rendered." The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite region of the canvas, established by the user agent according to the target medium.

Section 9.1

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document.

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.

So, when you add an absolutely positioned element, even though it does not increase the width of its containing block, it increases the size of the canvas. The browser then offers a scrolling mechanism to allow you to view the entire canvas.

To be clear, the scrolling does not occur because <div class="relative"> became wider, or even because <body> or some other block became wider. It was because the underlying canvas on which the document was rendered became larger.

Solution 5:

If you position an element absolutely, the hight and width of the wrapping element depends on its content. Even the overflow.

To not hide the wrapping element and remove the scroll bar, you should remove the overflow of the body tag.

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

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