<div id="blue">
<div id="red"></div>
</div>
我希望这个红色的 div 在滚动时移动到蓝色的 div 中。
它不应该永远不能退出蓝色的div。
有代码:http://jsfiddle.net/zhQZt/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/
关于css - 滚动上的可移动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14016046/