扩展位置绝对div外溢出隐藏div [英] Extending position absolute div outside overflow hidden div

问题描述

我已经在几个月没有做CSS，所以我可能会错过一些简单的，但无论解决方案是什么，我不能想出来。

I've haven't done css in several month so I might miss something simple, but whatever the solution is, I couldn't figure it out. So here is the problem.

这里是我的代码的简化版本：

Here is simplified version of my code:

<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， 。问题是我的包装器溢出：隐藏，它将不允许去外面。
我需要它保持溢出：隐藏虽然，由于一些js插件我使用。

So basically, I need the inner div test to extend 200px to the left, outside of outer div wrapper. The problem is that my wrapper is overflow:hidden and it won't allow to go outside. I need it to stay overflow:hidden though, due to some js plugin I am using.

有什么解决方法？
感谢

So is there any workarounds? Thanks

推荐答案

只有选项是将该div移出 overflow： / code> div。您不能说隐藏此div中溢出的所有内容 - 除了这一个div ...让我们做个例外

Only option is to move that div outside of the overflow:hidden div. You can't say hide everything in this div that overflows -- except for this one div... let's make an exception.

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

You can introduce one more layer in your hierarchy, whereby the inner div is overflow hidden and the outer div is not. Then place that positioned element in the outer div. A pseudo example would be:

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

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

如果偶然你已经在旧的div上定位了 overflow：hidden ，您可以将该设置移动到 outer div，以便正确放置。

If by chance you had positioning on the old div with overflow:hidden, you would move that setting to the outer div, allowing things to position properly.

所以简短的答案：没有解决方案将允许你做你想要的，而不改变你的CSS不是 overflow：hidden 或不改变你的标记。

So the short answer: no solution will allow you to do what you want without either changing your CSS to not be overflow:hidden or without changing your markup.

这篇关于扩展位置绝对div外溢出隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！