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

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

2 个答案: