Html 在溢出隐藏div之外扩展位置绝对div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15438828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extending position absolute div outside overflow hidden div
提问by Nazar
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.
我已经几个月没有做 css 了，所以我可能会错过一些简单的东西，但是无论解决方案是什么，我都想不通。所以问题来了。
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>
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.
所以基本上，我需要内部 div 测试在外部 div 包装器之外向左扩展 200px。问题是我的包装器溢出：隐藏，它不允许出去。我需要它保持溢出：虽然，由于我使用的一些 js 插件，隐藏。
So is there any workarounds? Thanks
那么有什么解决方法吗？谢谢
回答by Eli Gassert
Only option is to move that div outside of the overflow:hiddendiv. You can't say hide everything in this div that overflows -- except for this one div... let's make an exception.
唯一的选择是将该 div 移动到 div 之外overflow:hidden。你不能说隐藏这个 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 溢出隐藏，而外部 div 则没有。然后将该定位元素放在外部 div 中。一个伪示例是：
<div class="outer">
<div class="inner" style="overflow: hidden;">
....
</div>
<div class="abs-positioned">
</div>
</div>
If by chance you had positioning on the old div with overflow:hidden, you would move that setting to the outerdiv, allowing things to position properly.
如果碰巧你用 定位在旧的 div 上overflow:hidden，你会将该设置移动到outerdiv，让事物正确定位。
So the short answer: no solution will allow you to do what you want without either changing your CSS to not be overflow:hiddenor without changing your markup.
所以简短的回答是：没有任何解决方案可以让您在不更改 CSSoverflow:hidden或不更改标记的情况下做您想做的事情。
回答by Jdahern
Expanding on Piyas De:
在 Piyas De 上扩展：
Do note, that if the overflow hidden has
请注意，如果溢出隐藏有
position: relative
then it will not work
那么它就行不通了
回答by Alex
Overflow hidden can actually be ignored if the following rules are observed:
如果遵守以下规则，实际上可以忽略溢出隐藏：
- The overflowing child element has absolute positioning
- The parent with overflow hidden has static positioning
- A second parent wrapper with relative positioning is added
- 溢出的子元素具有绝对定位
- 隐藏溢出的父级具有静态定位
- 添加了具有相对定位的第二个父包装器
HTML
HTML
<div class="outer-wrapper">
<div class="wrapper">
<div class="overflowed">(Overflowing the wrapper)</div>
</div>
</div>
CSS
CSS
.outer-wrapper {
position: relative;
}
.wrapper {
overflow: hidden;
}
.overflowed {
position: absolute;
}
回答by Piyas De
Something like -
就像是 -
<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>
May solve your problem.
可以解决你的问题。
See..whether it helps or not...
看看..它是否有帮助...
回答by user2190488
Here's a fix that does not requires Javascript or moving anything. Just add a Parent wrapper with the width and height of #wrapper.
这是一个不需要 Javascript 或移动任何东西的修复程序。只需添加一个宽度和高度为#wrapper 的父包装器。
<div id="parent_wrapper" style="width:200px">
<div id="wrapper" style="position: absolute; overflow: hidden; height: 100%; width: 300px;">
<div id="test" style="position: absolute; margin-left:200px;">Test</div>
</div>
</div>
Please also see my live example: http://jsfiddle.net/ovjdqj4o/
另请参阅我的现场示例：http: //jsfiddle.net/ovjdqj4o/
