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>