Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does position absolute make page to overflow?

Tags:

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>
like image 989
Stickers Avatar asked Apr 10 '16 15:04

Stickers


People also ask

Why does position absolute not working?

If you are placing an element with absolute position, you need the base element to have a position value other than the default value. In your case if you change the position value of the parent div to 'relative' you can fix the issue.

Why does position absolute affect width?

Because the element, which you give absolute position take the width from his parent and didn't behave as a block element. It takes the width and height from its content. And only when the content is relatively positioned.

How do I fix overflowing in CSS?

To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.


2 Answers

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.

like image 101
JoostS Avatar answered Sep 17 '22 13:09

JoostS


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>
like image 32
LarsW Avatar answered Sep 19 '22 13:09

LarsW