Absolute Position and Overflow:Hidden

Position absolute and overflow hidden

Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.

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.

Absolute position and Overflow:hidden

It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.

See: http://jsfiddle.net/thirtydot/TFTnU/

HTML:

<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>

CSS:

#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}

#parent {
position: relative;
background: red;
width: 100px;
height: 100px
}

#child {
position: absolute;
background: #f0f;
width: 300px;
bottom: 0;
left: 0
}

#hideOverflow {
overflow: hidden
}
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>

CSS: Absolute positioning and overflow: hidden

use position:relative on your parent block.

This is because our child div is absolute positioned. But when you use absolute position, it refers to the first positionned parent. The first positionned parent is the first one to have a position: relative (or absolute) property

for the border radius problem, this is a firefox and chrome bug you can fix by using hacks. See it here :

CSS3 border-radius clipping issues

EDIT : To summarize :

add position: relative to the div artwork. then add your border radius to the "a" parent tag

CSS overflow hidden with absolute position

Since the image's container is positioned absolutely, it is outside of the flow of the "containing" div.

Your choices are to either position relatively or to adjust the dimensions of the absolutely-positioned div, dynamically, with jQuery.

Overflow: Hidden not working despite Absolute and Relative

You have to add the overflow: hidden; to the divs that are limiting the size (the parent divs), not the ones inside with the complete height.

Add this:

.topRow,
.middleRow,
.bottomRow {
overflow: hidden;
}

If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?

That's because the spec defines overflow as

This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.

The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"

If the element has position: absolute, the containing block is
established by the nearest ancestor with a position of absolute,
relative or fixed

Therefore the absolutely positioned element is not affected by that overflow: hidden.

If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.



Related Topics



Leave a reply



Submit