html - 绝对定位的 div 不会显示在相对定位的 div 之外

Question

请看下面的例子

http://jsfiddle.net/GANeX/90/

我想在包装器之外显示我的绿色div。我无法更改 wrapper div 的位置，因为 inner-wrapper 还包含一些其他内容，当我们更改 position:relative 时可能会出现这些内容到位置:静态。

我该怎么做？

Answer 1

您可以使用名为 dont-overflow 的类将不想溢出的内容包装在元素中。将该类的 width 设置为当前的 .wrapper 宽度，然后从父级中删除溢出并将其添加到该类中:

CSS 不要溢出类:

.dont-overflow
{
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
    height: 200px;
}

HTML:

<div class='wrapper'>
    <div class='inner-wrapper'>
         <div class='content-wrapper'></div>
         <div class='dont-overflow'>
             <div class='content-wrapper'></div>
             <div class='content-wrapper'></div>
             <div class='content-wrapper'></div>
         </div>
    </div>
 </div>

http://jsfiddle.net/GANeX/97/