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>

如果您偶然使用overflow:hidden定位旧div，则可以将该设置移至outer div，以便正确定位。

简而言之：没有任何解决方案可以让你做你想做的事情而不用改变你的CSS overflow:hidden或不改变你的标记。

Answer 2

扩展Piyas De：

an example

请注意，如果隐藏的溢出有

position: relative

然后它将无法正常工作

not working example

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>

可以解决您的问题。

看......它是否有帮助......

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/

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

5 个答案: