html - 絶対配置の div が相対配置の div の外に表示されない

Question

次の例を見てください

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

の外側に緑色の divを表示したいwrapper。に変更すると出てくる可能性のある他のコンテンツも保持するため、 wrapperdivの位置を変更することはできません。inner-wrapperposition:relativeposition: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;}