I am facing an issue with a div that is absolutely positioned within another div with overflow set to auto. The problem is that the child div is being cut off due to the overflow. I want the child div to break free from the container div, similar to how it would if there was no overflow set. I have tried adjusting z-index values but it hasn't solved the problem. Is there a solution for this?
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 {
position:absolute;
z-index:1;
width:300px;
height:450px;
border:1px solid #f00;
}