css - 滚动上的可移动div

Question

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

我希望这个红色的 div 在滚动时移动到蓝色的 div 中。

它不应该永远不能退出蓝色的div。

有代码:http://jsfiddle.net/zhQZt/2/

我希望你明白我的意思...

Answer 1

您可以通过一些巧妙的定位和 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/