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

Question

请看下面的例子

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

我想在wrapper. 我无法更改wrapperdiv 的位置，因为inner-wrapper还包含一些其他内容，当我们更改为 时可能会出现这些position:relative内容position:static。

我怎样才能做到这一点？

Answer 1

您可以使用名为dont-overflow. 将该类的设置width为当前.wrapper宽度，然后从父类中移除溢出并将其添加到该类：

CSSdont-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;}