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/

滚动的可移动div

2 个答案: