Absolute position and Overflow:hidden

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:

    

        
sdfsd
    
  
overflow "visible"

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
}

  

    
sdfsd
  
  
overflow "visible"