Html 如何让绝对定位的 div 扩展到其相对定位的父级之外，该父级具有溢出：自动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/582233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?
提问by pkaeding
I have a relatively -positioned div, which has overflow: autoset. 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.
我有一个相对定位的div，它已经overflow: auto设置好了。在里面，我有一个 div，它充当一种下拉菜单。我希望下拉 div 在需要时扩展到父级之外，但它正在被裁剪，因为父级有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:
我意识到这是正确的行为，但我不确定如何实现我想要的。下面是一些说明问题的示例 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>own div is contextually relevant to the other content in the overflow: autodiv, 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.
自己的 div 与 div 中的其他内容上下文相关overflow: auto，因此将它们放在一起是有意义的。我想我可以使用 javascript 将下拉 div 移动到 DOM 的另一部分，但如果可以避免的话，我宁愿不这样做。
回答by jvenema
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).
为避免此问题，您可以从外部 div 中删除“position:relative”，并添加一个带有“position:relative;”的包装 div。然后你必须添加“top:0;” 声明到您的内部 div （实际上您应该始终拥有它）。
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，它看起来像这样：（您可以删除“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>回答by bobince
I am not sure how to achieve what I want.
我不确定如何实现我想要的。
Neither am I?—?more info on what you want?
我也不是？—？关于你想要什么的更多信息？
Perhaps it would be a good idea to separate the element with overflow from the element with ‘position: relative', especially if that's only being used to locate the absolute inside.
也许将带有溢出的元素与带有“位置：相对”的元素分开是一个好主意，尤其是当它仅用于定位绝对内部时。
<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>
回答by lima
Given your specifications, this is the best I could came up with:
鉴于您的规格，这是我能想到的最好的方法：
<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>
There you have your div with overflow: auto;so scroll bars will appear if needed, and the drop-down div will look like it's extending "outside it's parent". Both are kept together under the same parent div, as you stated that they were contextually relevant to each other.
在那里你有你的 div，overflow: auto;所以如果需要，滚动条会出现，下拉 div 看起来像是在“在它的父级之外”延伸。两者都保存在同一个父 div 下，正如您所说，它们在上下文中彼此相关。
回答by buti-oxa
You use absolute positioning of inner div to position it relative to the outer div, but you do not want its content to count as outer div content. To achieve that, you need to separate inner div position from inner div content. You can try to do that by putting contents into fixed div.
您使用内部 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>
The trick is that fixed div w/o top/bottom/left/right specified will position itself at its "static" position, which seems to be what you need.
诀窍是没有指定顶部/底部/左侧/右侧的固定 div 会将自身定位在其“静态”位置，这似乎是您所需要的。
You may have problems with z-order, but, from your explanation, you do want your "menu" to be above everything else. (I assume that it comes and goes). You will sure have problems printing the page - if there is more than one page, fixed element repeats itself.
您可能对 z 顺序有问题，但是，根据您的解释，您确实希望“菜单”高于一切。（我假设它来来去去）。您肯定会在打印页面时遇到问题 - 如果页面多于一页，固定元素会自我重复。
As jvenema pointed out, this won't work in IE6. :(
正如 jvenema 指出的，这在 IE6 中不起作用。:(
回答by random
That's impossible. If you set overflow:autoon the parent DIV, that locks any child DIV from breaking out of the content box.
这不可能。如果您overflow:auto在父 DIV 上设置，则会锁定任何子 DIV，使其无法脱离内容框。
You could try and fiddle with z-indexvalues, but that may cause you to go blind in the left eye.
您可以尝试摆弄z-index值，但这可能会导致您的左眼失明。
An idea would be to wrap the parent DIV with another DIV so that the DIV you want to pop out will be positioned according to the grandparent DIV. But that way will give you carpal tunnel and won't work either because you would have to know where in the flow of the parent DIV you want the child DIV to be.
一个想法是用另一个 DIV 包装父 DIV，以便您要弹出的 DIV 将根据祖父 DIV 定位。但这种方式会给你腕管，也不会工作，因为你必须知道你希望子 DIV 在父 DIV 流中的哪个位置。
回答by jeroen
Just remove the overflow: autopart and close the inner div correctly with a closing tag, that way it works in IE6, IE7, Firefox 3 and Opera => probably all browsers.
只需删除溢出：自动部分并使用结束标记正确关闭内部 div，这样它就可以在 IE6、IE7、Firefox 3 和 Opera 中工作 => 可能所有浏览器。
回答by Ape-inago
I'd say the fact that it's context sensitive is what's causing you problems. Perhaps you could restructure how that is set up? I'd have a parent div class that provides the context to these two, and have them separated from each other inside this div (using relative positioning to align them as you want?)
我会说它是上下文敏感的事实是导致您出现问题的原因。也许你可以重组它的设置方式？我有一个父 div 类，它为这两个提供上下文，并将它们在这个 div 内彼此分开（使用相对定位来根据需要对齐它们？）
My 2c
我的 2c
回答by Justin Gallagher
Try using overflow: visible; instead.
尝试使用溢出：可见；反而。
