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在上下文中与overflow: auto div中的其他内容相关，因此将它们保持在一起是有意义的。我想我可以使用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>

Answer 3

鉴于您的规格，这是我能想到的最好的：

<div style="position: relative; height: 100px; width: 100px; background: red;">
    <div style="height: 100px; width: 100px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;"></div>
</div>

你的div有overflow: auto;，所以如果需要的话会出现滚动条，下拉div看起来像是在“它的父母之外”。两者都在同一个父div下保持在一起，因为你说它们在内容上是相互关联的。

Answer 4

您使用内部div的绝对定位来相对于外部div进行定位，但您不希望其内容计为外部div内容。要实现这一点，您需要将内部div位置与内部div内容分开。您可以尝试将内容放入固定的div中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head> <title>Test</title> </head>

<body>

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

</body>
</html>

诀窍是没有指定顶部/底部/左/右的固定div将自己定位在“静态”位置，这似乎是你需要的。

您可能遇到z-order问题，但是，从您的解释来看，您确实希望您的“菜单”高于其他所有菜单。（我假设它来了又去）。您肯定会在打印页面时遇到问题 - 如果有多个页面，则固定元素会自行重复。

正如jvenema所指出的，这在IE6中不起作用。：（

Answer 5

那是不可能的。如果在父DIV上设置overflow:auto，则会阻止任何子DIV突破内容框。

您可以尝试使用z-index值，但这可能会导致您在左眼失明。

一个想法是用另一个DIV包装父DIV，以便你想要弹出的DIV将根据祖父母DIV定位。但是这种方式会给你腕管并且不会起作用，因为你必须知道你想要孩子DIV的父DIV流程在哪里。

Answer 6

只需删除 overflow：auto 部分，然后使用结束标记正确关闭内部div，这样就可以在IE6，IE7，Firefox 3和Opera =＆gt;中运行。可能是所有的浏览器。

Answer 7

我会说它的上下文敏感是造成你问题的原因。也许你可以重新构建它的设置方式？我有一个父div类，为这两个提供上下文，并让它们在这个div中相互分开（使用相对定位来根据需要对齐它们？）

我的2c

Answer 8

尝试使用overflow：visible;代替。

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

8 个答案: