溢出隐藏div外扩展位置绝对div

Question

我几个月没有做过CSS,所以我可能会错过一些简单的东西,但无论解决方案是什么,我都无法理解.所以这就是问题所在.

这是我的代码的简化版本:

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

所以基本上,我需要内部div测试将200px扩展到外部div包装器之外的左侧.问题是我的包装器溢出:隐藏,它不允许外出.我需要它保持溢出:虽然隐藏,因为我使用的一些js插件.

那么有什么变通方法吗？谢谢

Answer 1

唯一的选择是将div移到div之外overflow:hidden.你不能说隐藏这个溢出的div中的所有内容 - 除了这个div ...让我们做个例外.

您可以在层次结构中引入另一个层,其中内部div是溢出隐藏而外部div不是.然后将定位元素放在外部div中.一个伪示例是:

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

如果你偶然在旧的div上定位overflow:hidden,你可以将该设置移动到outerdiv,让事情正确定位.

简而言之:没有任何解决方案可以让你做你想做的事情,而无需改变你的CSS,也可以overflow:hidden不改变你的标记.

Answer 2

扩展Piyas De:

一个例子

请注意,如果隐藏溢出了

position: relative

然后它将无法正常工作

不工作的例子

Answer 3

如果遵守以下规则,实际上可以忽略隐藏溢出:

• 溢出的子元素具有绝对定位
• 隐藏溢出的父级具有静态定位
• 添加了具有相对定位的第二个父包装器

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

FIDDLE http://jsfiddle.net/vLsmmrz6/