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/