扩展位置绝对股利外溢出隐藏的div(Extending position absolute div

我在几个月还没有这样做的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测试延长200至左侧，外层div包装之外。问题是，我的包装是溢出：隐藏，它不会允许到外面去。我需要它留溢出：隐藏不过，由于我使用一些JS插件。

那么，有没有解决办法？谢谢

Answer 1:

唯一的选择就是以移动DIV的外部overflow:hidden股利。你不能说这个的div溢出隐藏的一切-除了这一个DIV ...让我们做一个例外 。

您可以在您的层次结构，从而使内部的div溢出隐藏和外层的div不引入一个新的层。然后将其放置在元件的外层div。伪例子是：

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

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

如果碰巧你已经在旧的分度定位overflow:hidden ，你会移动，设置于outer格，让事情正确定位。

所以，答案很简单：没有办法可以让你做你想做的任何不改变你的CSS不overflow:hidden或不改变你的标记。

Answer 2:

扩展在Piyas德：

一个例子

待办事项，如果隐藏的溢出具有

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/

Answer 4:

就像是 -

<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>

可以解决您的问题。

See..whether它帮助或不...

Answer 5:

这里有没有一个修复需要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>

也请参阅我的活生生的例子： http://jsfiddle.net/ovjdqj4o/

文章来源: Extending position absolute div outside overflow hidden div