我怎么能得到一个绝对定位的股利扩展到它的relativley定位的父母，其溢出：汽车？ [英] How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?

问题描述

我有一个相对定位的div，它有 overflow：auto set。在里面，我有一个div，它可以作为一种下拉菜单。我希望下拉格在需要的时候扩展到父类之外，但由于父类有 overflow：auto 。

我意识到这是正确的行为，但我不知道如何实现我想要的。下面是一些用于说明问题的HTML示例：

与 overflow：auto div中的其他内容具有上下文相关性，所以将它们放在一起非常有意义。我想我可以使用javascript将下拉div移动到DOM的另一部分，但我宁愿不这样做，如果我可以避免它。

解决方案

你的问题是位置：相对父母。既然你在元素上有这个定位，那么内部框将始终保持在溢出位置（position：absolute是相对于最近的定位父对象）。



为了避免这个问题，你可以从外部div中删除position：relative，并添加一个包含position：relative;的包装div。您必须添加top：0声明到你的内部div（你应该总是有，实际上）。



最终的结果是一个额外的div，它看起来像这样:(你可以删除

 < div style =position：relative; border：1px solid blue;> < div style =height：100px; width：100px; background：red; overflow：auto;>如果这里有一些非常长的内容，它会导致溢出，但绿色框不会< div style =position：absolute; z-index：-1; left：20px; top：0; height：200px; width ：200px; background：green;> < / DIV> < / div>< / div>  

I have a relatively -positioned div, which has overflow: auto set. Inside that, I have a div which acts as a sort of drop-down menu. I want the drop-down div to extend outside of the parent when it needs to, but it is being cropped, since the parent has overflow: auto.

I realize that this is the correct behavior, but I am not sure how to achieve what I want. Here is some example HTML that illustrates the problem:

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">  

    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;">
    </div>

</div>

own div is contextually relevant to the other content in the overflow: auto div, so it makes sense to keep them together. I suppose I could use javascript to move the drop-down div to another part of the DOM, but I'd rather not do that if I can avoid it.

解决方案

Your problem is the position:relative parent. Since you have that positioning on the element, the inner box will ALWAYS stay within the overflow (position:absolute is relative to the nearest positioned parent).

To avoid the issue, you can remove the "position:relative" from the outer div, and add a wrapper div with the "position:relative;". You'll have to then add the "top:0;" declaration to your inner div (you should always have that, actually).

The end result is one extra div, and it looks like this: (you can remove the "z-index:-1" style, I just added that so you can see the result better)

<div style="position:relative;border:1px solid blue;">
    <div style="height: 100px; width: 100px; background: red; overflow: auto;">
        if there is some really long content here, it will cause overflow, but the green box will not
        <div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
        </div>
    </div>
</div>

这篇关于我怎么能得到一个绝对定位的股利扩展到它的relativley定位的父母，其溢出：汽车？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！