html - 扩展位置绝对div outside overflow hidden 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 移到 overflow:hidden div 之外。您不能说隐藏此 div 中溢出的所有内容 -- 除了这个 div...让我们破例。

您可以在层次结构中再引入一层，从而使内部 div 溢出隐藏，而外部 div 则不然。然后将该定位元素放在外部 div 中。一个伪示例是:

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

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

如果您碰巧在旧的 div 上定位了 overflow:hidden，您可以将该设置移动到 outer div，以便正确定位。

所以简短的回答是:没有任何解决方案可以让您在不更改 CSS 使其不被 overflow:hidden 或不更改标记的情况下做您想做的事。