我有一个相对位置的div，它有溢出：自动设置。在里面，我有一个div作为一个下拉菜单。我希望下拉div在需要时扩展到父级外部，但是正在被裁剪，因为父级已经溢出：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与溢出中的其他内容相关：auto div，所以将它们保持在一起是有意义的。我想我可以使用javascript来将下拉列表移动到DOM的另一部分，但如果我能避免这种情况，我宁愿不这样做。
解决方法
你的问题是位置：亲戚。由于您在元素上有定位，因此内箱将始终保持在溢出状态(位置：绝对值相对于最近定位的父级)。
为了避免这个问题，你可以从外部的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>
