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

Question

我有一个具有自动溢出功能的绝对定位 div。在这个 div 里面是另一个绝对定位的 div。我的问题是这个子 div 由于溢出而被切断。我希望它像未设置溢出一样逃脱容器 div。我试过设置 z-indexes 但它没有帮助。我能做什么？

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 放在当前父元素之外。让它成为一个绝对定位的对等体。