CSS Overflow Hidden with Absolute Position

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.

Position absolute and overflow hidden

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

CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:

Sample Image

And here is the full code with this change:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

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>

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.

Parent overflow hidden with absolute children

Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.

.half-left, half-right {
    float: left;
}

.box {
    position: relaitve;
    overflow: hidden;
}

Then when you add active to the parent container, the two children should transform as you intended.

Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ

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

CSS Overflow Hidden with Absolute Position