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元素本身。解决方案是div旁边的内部.thing。

Answer 2

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

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

一个问题是thing的每个祖先都必须手动绑定到它的滚动事件，因为该事件不会使链条冒泡。

修改如果thing超出body的底部，{{1}}可以被截断，因为固定元素无法生成父母任何更大的

Answer 3

您可以在<p>标记周围放置一个内包装div，然后复制.wrap规则：

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

然后从overflow:hidden删除.wrap。

（您也可以将这些规则添加到<p>代码中，我想，如果只有一个<p>}

Answer 4

答案：是的。

可以在没有Javascript且不移动任何HTML的情况下执行此操作。

设置父Div，并为其提供与＆＃39; .wrap＆＃39;相同的高度值：

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

然后给＆＃39; .wrap＆＃39;宽度更大

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

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

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

4 个答案: