绝对定位的div设置了overflow属性后导致其子元素的绝对定位div被裁剪。

Question

我有一个绝对定位的具有溢出自动属性的 div。在这个 div 内部是另一个绝对定位的 div。我的问题是，由于溢出，子 div 被切断了。我希望它能像没有设置 overflow 时那样逃离容器 div。我已经尝试设置 z-index，但没有帮助。我该怎么办？ HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

的翻译是：

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

- user969622

---

+1. [jsfiddle]（http://jsfiddle.net）在这些地方很受欢迎。 - Alex

我已经完成了。如您所见，子div并未从父div中出现。 - user969622

我需要它滚动其他元素，比如文字（这个例子中没有），但是我需要这个div突出显示，因为它将显示其他信息，比如图片。 - user969622

可能是如何解决overflow: auto中溢出内容自动截断的问题？的重复问题。 - peterh

@peterh，一个6岁的问题怎么可能是昨天问过的那个问题的重复？如果有什么问题，应该是反过来的。 - Peter B

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

- Wex

Answer 2

如果您希望某些元素不会溢出其父元素，而有些元素则需要溢出，最好将当前的子 div 放到当前父 div 的外面。只需将其设置为绝对定位的同级元素即可。

- Jacob

---

那么，我如何使它从父div内部的参考点出现？例如，如果它在父div内部并且紧挨着一些文本，它将在该文本旁边弹出，但是如果我将div移动到父div之外-如果子元素不再紧挨着它，那么我该如何使它在同一文本旁边弹出？ - user969622

你的意思是希望它能够随着其他内容一起滚动并弹出吗？我认为你需要使用JavaScript来实现这种效果。 - Jacob

如果您想使用jQuery，那么可以使用一个滚动事件。然后，您需要计算滚动位置并根据其移动第二个div。请参阅http://api.jquery.com/scroll/。 - Jacob

我已经找到了一个解决方案，通过将子div设置为固定位置而不是绝对位置，它似乎正在逃避父容器的溢出。 - user969622