css – 具有溢出自动的绝对定位div导致子绝对div被切断

我有一个绝对定位的div与溢出auto.在这个div里面是另一个绝对定位的div.我的问题是这个子div由于溢出而被切断.如果没有设置溢出,我希望它能够逃脱容器div.我已经尝试过设置z-index但它没有帮助.我能做什么？

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;
}

解决方法

看看你是否可以依靠另一种方法来清除浮子.将CSS更改为溢出：可见绝对是一个很好的解决方案.

你的另一个解决方案是将div放在容器外面,这样它就不会被切断,并将它们放在一个新容器中：

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