在溢出隐藏的div之外扩展位置绝对div答案

【问题标题】：Extending position absolute div outside overflow hidden div在溢出隐藏的div之外扩展位置绝对div
【发布时间】：2013-03-04 13:07:11
【问题描述】：

我已经有几个月没有做 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 插件，我需要它保持溢出：隐藏。

那么有什么解决方法吗？谢谢

【问题讨论】：

你能分享你的代码（或详细说明js插件）吗？
抱歉，一开始想不通
@doitlikejustin 插件是 niceScroll areaaperta.com/nicescroll

标签： html css overflow css-position

【解决方案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 或不改变你的标记。

【讨论】：

嗯，我试图实现这一目标的原因是因为我的包装器中有一个
不幸的是，您只有两个选择——更改溢出 CSS 规则，或更改标记以绕过它。对不起！
所描述的填充解决方案很有趣，但它也会允许其他元素溢出到该填充区域。如果没问题，那就考虑一下。 stackoverflow.com/a/15439038/1795053

【解决方案2】：

在 Piyas De 上扩展：

an example

请注意，如果溢出隐藏有

position: relative

那就不行了

not working example

【讨论】：

谢谢，重要的回答！
最佳答案

【解决方案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;
}

小提琴 http://jsfiddle.net/vLsmmrz6/

【讨论】：

您的意思是“未添加具有相对定位的第二个父包装器”吗？检查这个：jsfiddle.net/4pjz5srk/2

【解决方案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>

可能会解决您的问题。

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

【讨论】：

【解决方案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/

【讨论】：