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

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;开发者_StackOverflow
}

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

    width:300px;
    height:450px;

    border:1px solid #f00;
}

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 */
}

If you want some elements to not overflow the parent and some elements to not, you'd be better off placing the current child div outside of the current parent. Just make it an absolutely positioned peer.