html - Absolute position and Overflow:hidden

Question

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

I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible? parent element has position:relative; child element gets stripped as soon as it's out of it's parents borders.

(elements have additional css defined I just put style attributes for clearness)

Answer 1

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>