Absolute positioned div with overflow auto causing child absolute div to be cut off

Question

I have a absolute positioned div with overflow auto. Inside this div is another absolute positioned div. My problem is that this child div gets cut off due to the overflow. I want it to escape the container div as it would if overflow was not set. I have tried setting z-indexes but it does not help. What can I do?

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
   position:absolute;
   z-index:0 
   overflow:auto;

   width:400px;
   height:400px;

   border:1px solid #000;
}

.child {
    poisiton:absolute;
    z-index:1

    width:300px;
    height:450px;

    border:1px solid #f00;
}

Answer 1

See if you can rely on another method to clear your floats. Changing your CSS to overflow: visible is definitely a good solution.

Your other solution is to take the div outside of its container so it doesn't get cut off, and put them both inside of a new container:

<div class="container">
    <div class="parent">
    </div>
    <div class="child">
    </div>
</div>

CSS:

.container { 
    /* apply positioning from .parent */
}
.parent {
    position: absolute;
    top: 0; 
    left: 0;
}
.child {
    /* apply positioning from .child */
}