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

Question

我有一个绝对定位div与溢出自动.在这个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;
}

Answer 1

看看是否可以依靠另一种方法来清除浮动。将CSS更改overflow: visible为绝对是一个很好的解决方案。

您的另一种解决方案是将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 */
}

Answer 2

如果您希望某些元素不溢出父级，而某些元素不溢出，则最好将当前子级 div 放置在当前父级之外。就让它成为绝对定位的同行吧。