css - スクロール時の可動div

Question

<div id="blue">
    <div id="red"></div>
</div>

この赤いdivをスクロール時に青いdiv内に移動させたい。

青いdivを終了することはできません。

コードがあります：http：//jsfiddle.net/zhQZt/2/

私が何を意味するのか理解していただければ幸いです...

Answer 1

探しているCSSコードはoverflow: scroll;、ここで説明されています：http ://www.w3schools.com/cssref/pr_pos_overflow.asp 。

#blue {
    height:300px;
    width:200px;
    background:blue;
    overflow: scroll;
}

#red {
    height:50px;
    width:250px;
    background:red;
}

http://jsfiddle.net/zhQZt/2/

Answer 2

これは、いくつかの巧妙な配置とz-indexを使用して、赤いdivが青いdiv内に含まれているように見せることで実現できます。新しいdivが追加され、赤いボックスよりも高いz-index値と、あふれたときに赤いボックスを非表示にする背景色が追加されました。

新しいCSS：

#continue {
 background:white;
position:relative;
 z-index:2;
height:100%;
 width: 200px;

}
#blue {
    height:300px;
    width:200px;
    background:blue;

position:relative
}

#red {
    height:50px;
    width:200px;
    position:fixed;
    background:red;
    overflow:hidden;
    z-index:1;
}​

新しいHTML：

<div id="blue">
<div id="red">
</div>
</div>
<div id="continue">
<!--Your line breaks -->
</div>​

実用的な例については、jsfiddleを参照してください：http：//jsfiddle.net/zhQZt/5/