Html 位置绝对和溢出隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4605715/
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
Position absolute and overflow hidden
提问by Zardoz
We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV (example).
我们有两个 DIV，一个嵌入在另一个中。如果外部 DIV 不是绝对定位，那么内部 DIV（绝对定位）不遵守外部 DIV 的溢出隐藏（示例）。
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)? Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD (exmple).
有没有机会让内部 DIV 服从外部 DIV 隐藏的溢出而不将外部 DIV 设置为绝对位置（因为这会破坏我们的完整布局）？我们内部 DIV 的相对位置也不是一个选项，因为我们需要从表 TD 中“成长”（例如）。
Are there any other options?
还有其他选择吗？
回答by shankhan
Make outer <div>to position: relativeand inner <div>to position: absolute. It should work for you.
使外<div>到position: relative和内<div>到position: absolute. 它应该适合你。
回答by Tesserex
What about position: relativefor the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
怎么样position: relative的外层div？在隐藏内部的示例中。它也不会在其布局中移动它，因为您没有指定顶部或左侧。
回答by Si7ius
An absolutely positioned element is actually positioned regarding a relativeparent, or the nearest found relative parent. So the element with overflow: hiddenshould be between relativeand absolutepositioned elements:
绝对定位元素实际上是relative相对于父元素或最近找到的相对父元素定位的。所以元素 withoverflow: hidden应该在relative和absolute定位元素之间：
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}
回答by rochano
You just make divs like this:
你只是让divs 像这样：
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)
我希望这段代码能帮助你:)
