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>

The code below works like a charm.

<div id="grandparent" style="position:relative;">
    <div id="parent" style="overflow:hidden;">
        <div id="child" style="position:absolute;">
        </div>
    </div>
</div>

I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.

<div id="parent" style="position:relative;">
  <!-- floating divs here -->
  <div id="child" style="position:absolute;"></div>
  <div style="clear:both"></div>
</div>