如何让一个绝对定位的div扩展到它的相对性定位的父级之外,它具有溢出:auto？

Question

我有一个相对位置的div,已overflow: auto设置.在里面,我有一个div作为一种下拉菜单.我希望下拉div在需要时扩展到父项外部,但是由于父项具有,它正在被裁剪overflow: auto.

我意识到这是正确的行为,但我不确定如何实现我想要的.以下是一些说明问题的示例HTML:

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

自己的div在上下文中与div中的其他内容相关overflow: auto,因此将它们保持在一起是有意义的.我想我可以使用javascript将下拉div移动到DOM的另一部分,但如果我可以避免它,我宁愿不这样做.

Answer 1

你的问题是职位:亲戚.由于您在元素上具有该定位,因此内框将始终保持在溢出内(位置:绝对相对于最近定位的父级).

要避免此问题,可以从外部div中删除"position:relative",并使用"position:relative;"添加包装器div.然后你必须添加"top:0;" 声明你的内部div(实际上你应该总是这样).

最终结果是一个额外的div,它看起来像这样:(你可以删除"z-index:-1"样式,我只是添加了这样你可以更好地看到结果)

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

Answer 2

我不确定如何实现我想要的.

我也不是 - 更多关于你想要的信息？

也许用'position:relative'将元素溢出与元素分开是个好主意,特别是如果它只用于定位绝对内部.

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