Why does position absolute make page to overflow? - html

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>

Answer 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);
}
<div class="relative">
Placeholder <div class="absolute"></div>
</div>
Hope it helps.

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

Answer 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;
}
<div class="relative">
<div class="absolute"></div>
</div>

Answer 6

Your understanding is once an element is positioned absolute (even with a negative position value), it will completely out of the normal content flow.
You are right, but, Read it once again.
The sentence "it will completely out of the normal content flow" it doesn't mean that it will be hidden if it will be out of its container.
If you want it to be hidden out of the container, then the parent should be overflow: hidden.
Here in your case it has made a page to overflow because default overflow property values is visible. It should be there as per W3C.
W3C: https://www.w3.org/TR/css3-positioning/#abs-pos
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed or page) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
MDN: https://developer.mozilla.org/en/docs/Web/CSS/position
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static). If a positioned ancestor doesn't exist, the initial container is used.
Even if you make your .relative to fixed width and set overflow: hidden then horizontal also scroll appears.
See below:
.relative {
position: relative;
background: pink;
width: 500px;
overflow: auto;
}
.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 7

You can simply add overflow hidden to relatively position element and give its the height you want. From my perspective it is the best solution. And play around with the absolutely positioned div.
.relative {
position: relative;
background: pink;
overflow:hidden;
}
.absolute {
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
}

Answer 8

Speaking about floating sidebar, lately I was working on that and I found very simple solution that can be useful especially in case you don't have access or do not want to apply styles on body element.
Just want to leave it here, maybe it can be useful for somebody.
scss code below
$sidebar-width: 413px;
.right-sidebar-wrapper {
position: absolute;
top: 0;
right: 0;
z-index: 999;
height: 100%;
width: $sidebar-width;
overflow-x: hidden;
transition: width 500ms;
&.isHidden {
width: 0;
}
.right-sidebar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: $sidebar-width;
}
}
The point here is to place one absolute positioned element inside another which has overflow-x: hidden and then make transition not by right coordinate but by width to collapse parent block.
This right sliding sidebar works perfectly for me.