可以定位：绝对元素以某种方式从溢出中溢出：隐藏的容器？

Question

我怀疑答案是一个非常确定的不，但给了以下的HTML和CSS，是否有一些调整（无需编辑HTML）我可以做到绝对定位“东西”显示，同时保持其他溢出内容隐藏。

<div class="wrap"> 
<p>Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. </p> 
    <div class="thing">thing</div> 
</div> 

.wrap { 
    width: 100px; 
    height: 100px; 
    overflow:hidden; 
    position:relative; 
} 

.thing { 
    position:absolute; 
    top: -3px; 
    right: -10px; 
} 

Answer 1

不，您必须将高度/宽度设置为内容而不是.wrap元素本身。解决方案将是.thing旁边的内部div。

Answer 2

你可以让周围的<p>标签内包装的div，然后复制.wrap规则：

.innerwrapper { 
    width: 100px; 
    height: 100px; 
    overflow:hidden; 
    position:relative; 
} 

然后从.wrap删除overflow:hidden。

（你也可以添加这些规则到<p>标签，而不是我猜想，如果只是要成为一个<p>）

Answer 3

如果你不介意一些JavaScript，这是可以做到的根本不改变HTML的结构。它的工作原理是在thing上设置position: fixed; top: auto; left: auto;，然后在页面滚动时调整thing的位置 - 我通过margin-top css属性进行设置。

实施例： http://jsfiddle.net/sparebytes/zxwL8/

的一个问题是，每thing祖先必须有自该事件不冒泡链手动绑定了滚动事件。

编辑一个回拉的是，thing可以被切断，如果它延伸过body的底部，因为固定元素不能让他们的父母任何大

Answer 4

答：是的。

它可以做到这一点没有Javascript和没有移动任何HTML。

设置父事业部，并给它相同的高度值“.wrap‘：

<div class="parent_wrap" style="width: 100px; height: 100px; "> 

然后给了’.wrap”更大的宽度

<div class="wrap" style="width: 999px;"> 

请参阅我的活生生的例子：http://jsfiddle.net/7o1e0ga0/2/