绝对位置和溢出：隐藏
<div id="parent" style="overflow:hidden; position:relative;"> <div id="child" style="position:absolute;"> </div> </div> 我需要显示大于它的父元素的子元素，但不删除溢出：隐藏; 这可能吗？ 父元素有position:relative; 子元素一旦离开父母边界就会被剥离。
（元素有额外的CSS定义我只是把风格属性清晰）
用overflow: hidden和position: relative来完成你想要的事情是完全不可能的。相反，你可以引入一个额外的子div并移动overflow: hidden 。
请参阅： http : //jsfiddle.net/thirtydot/TFTnU/
HTML：
<div id="parent"> <div id="hideOverflow"> <div style="width:1000px;background:#ccc">sdfsd</div> </div> <div id="child">overflow "visible"</div> </div>
CSS：
#parent { position:relative; background:red; width:100px; height:100px } #child { position:absolute; background:#f0f; width:300px; bottom: 0; left: 0 } #hideOverflow { overflow: hidden }
下面的代码就像一个魅力。
<div id="grandparent" style="position:relative;"> <div id="parent" style="overflow:hidden;"> <div id="child" style="position:absolute;"> </div> </div> </div>
我通常使用overflow：hidden作为clearfix。 在这种情况下，我放弃了，只是添加一个额外的div。
<div id="parent" style="position:relative;"> <!-- floating divs here --> <div id="child" style="position:absolute;"></div> <div style="clear:both"></div> </div>
使用CSS …
* {margin: 0; padding: 0;} #parent {width: auto; overflow: hidden;} #child {position: absolute; width: auto;}
随着宽度自动它将总是追加到最小的可能的大小; 并重置它将有助于保持自然stream动。
但是，如果孩子比父母更大，那么这是不可能的。 但是用这个CSS，我认为你会尽可能地达到你想要的。
thirtydot的解决scheme实际上是一个好主意。
这是一个更清晰的例子： http : //jsfiddle.net/y9dtL68d/
HTML
<div id="grandparent"> <div id="parent"> <p>this has a lot of content which ...</p> <p>this has a lot of content which ...</p> <p>this has a lot of content which ...</p> <p>this has a lot of content which ...</p> <p>this has a lot of content which ...</p> <p>this has a lot of content which ...</p> <p>this has a lot of content which ...</p> </div> <div id="child"> dudes </div> </div>
CSS
#grandparent { position: relative; width: 150px; height: 150px; margin: 20px; background: #d0d0d0; } #parent { width: 150px; height: 150px; overflow:hidden; } #child { position: absolute; background: red; color: white; left: 100%; top: 0; }
