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

Question

请查看以下示例

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

我想在wrapper之外显示绿色div 。我无法更改wrapper div的定位，inner-wrapper还包含我们将position:relative更改为position:static时可能会出现的其他内容。

我该怎么做？

Answer 1

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

CSS dont-overflow类：

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

Answer 2

我认为你需要使用z-index。

.inner-wrapper{
position:absolute;
left:10px;
right:10px;
top:5px;
bottom:5px;
z-index: 999;
background:yellow;}